如何從webpack創建的包中引用或訪問我的類？

我正在關注此tutorial以瞭解webpack。這是過時的，因爲引用的工具在我的情況下升級。我的版本如下。如何從webpack創建的包中引用或訪問我的類？

TS-裝載機^ 1.3.3
TSD^0.6.5
打字稿^ 2.1.5
的WebPack^1.14.0

成功創建bundle.js文件後，我似乎有問題訪問/引用我的TypeScript到JavaScript類。我的tsconfig.json看起來如下所示。

{ 
    "compilerOptions": { 
    "module": "commonjs", 
    "sourceMap": true, 
    "declaration": true 
    }, 
    "include": [ 
    "src/**/*" 
    ] 
}

我的wepack.config.js如下所示。

var webpack = require('webpack'); 
module.exports = { 
    entry: './src/app.ts', 
    output: { 
    filename: 'bundle.js' 
    }, 
    devtool: 'source-map', 
    resolve: { 
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'] 
    }, 
    module: { 
    loaders: [ 
     { test: /\.ts$/, loader: 'ts-loader' } 
    ] 
    } 
}

要傳輸TypeScript代碼，我只需鍵入tsc。要將所有代碼捆綁到bundle.js，我只需輸入webpack。（tsc和webpack全球安裝）。

在我的src目錄中，我只有2個簡單的類。 car.ts看起來如下所示。

export class Car { 
    public sayHi(): void { 
    console.log('car says hi'); 
    } 
}

app.ts看起來像下面這樣。

import { Car } from './car'; //alternatively, import Car = require('./car'); 

let car = new Car(); 
car.sayHi();

然後，我將這個bundle.js加載到HTML頁面中的瀏覽器中，如下所示。

<html> 
    <head> 
    <title>Test Webpack</title> 
    </head> 
    <body> 
    <script src="bundle.js"></script> 
    </body> 
</html>

我可以在（Chrome）JavaScript控制檯中看到日誌消息「car says hi」。但是，我如何創建一個新的Car實例？以下JavaScript控制檯嘗試不起作用。

var c1 = new Car(); //Uncaught reference error 
var c2 = new car.Car(); //Uncaught reference error

內部bundle.js，我看到這個碼/產生模塊（片段）。

/* 0 */ 
/***/ function(module, exports, __webpack_require__) { 

    "use strict"; 
    var car_1 = __webpack_require__(1); 
    var car = new car_1.Car(); 
    car.sayHi(); 


/***/ }, 
/* 1 */ 
/***/ function(module, exports) { 

    "use strict"; 
    var Car = (function() { 
     function Car() { 
     } 
     Car.prototype.sayHi = function() { 
      console.log('car says hi'); 
     }; 
     return Car; 
    }()); 
    exports.Car = Car; 


/***/ }

我的最終目標是讓與（打字稿）映射transpiled成一個單一的bundle.js爲模塊，這樣我可以使用/引用代碼（如JavaScript在瀏覽器）的src目錄中的所有打字稿文件如下。

var car = new mylib.Car(); 
var plane = new mylib.Plane(); 
car.sayHi(); 
plane.sayHi();

關於我在做什麼的錯誤？

來源

2017-01-14 Jane Wayne

你應該做的是讓webPack爲你處理翻譯。使用TypeScript loader。

什麼webpack做的是模塊（這是你放的最後一個文件，一切都在一個帶有上下文的函數中，並且沒有你在全局空間上給出的名字）。任何全局名都綁定到作用域（或者如果你使用ugligy ）所以你不能從控制檯訪問它們。使webpack使用typescript加載器，你可以參考汽車只需要或導入文件。

來源

2017-01-14 20:46:30 FabioCosta

如果你看看我的webpack.config.js，不要指定'ts-loader'嗎？ –

由於您引用了官方文檔，我用'awesome-typescript-loader'換出了'ts-loader'，我仍然得到相同的效果。沒有不同。我不能參考這個課程。 –

但你仍然試圖從控制檯引用？另外我可能會誤解，但我的印象是，你手動編譯了ts，然後捆綁在一起 – FabioCosta

如何從webpack創建的包中引用或訪問我的類？

回答

相關問題