Jan*_*yne 5 javascript typescript webpack
我正在按照本教程学习 webpack。它已经过时了，因为在我的情况下引用的工具已升级。我的版本如下。
成功创建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 say 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;
/***/ }
我的最终目标是将src目录中的所有 TypeScript 文件与（TypeScript）映射转换bundle.js为一个模块，以便我可以使用/引用代码（作为浏览器中的 JavaScript），如下所示。
var car = new mylib.Car();
var plane = new mylib.Plane();
car.sayHi();
plane.sayHi();
关于我做错了什么的任何想法？
您应该做的是让 webPack 也为您处理转译。使用TypeScript 加载器。
webpack 所做的是制作模块（您放置的最后一个文件，所有内容都在具有上下文的函数内，并且没有您在全局空间上指定的名称）。任何全局名称都绑定到范围（如果您丑陋，则可以更改），因此您可以不能从控制台访问它们。让 webpack 使用 typescript 加载器，您只需需要或导入文件即可引用汽车。
| 归档时间： |
|
| 查看次数： |
2593 次 |
| 最近记录： |