[英]Webpack 2 won't work when using ts-loader
I have been setting up a basic angular 2 (typescript) application, which uses Webpack 2 for bundling etc. 我一直在建立一个基本的angular 2(打字稿)应用程序,该应用程序使用Webpack 2进行捆绑等。
My issue is that when I use ts-loader to process typescript (.ts) files I get a lot of errors. 我的问题是,当我使用ts-loader处理打字稿(.ts)文件时,出现很多错误。 I suspect, but am not totally sure, that the errors are to do with ts-loader not excluding the node_modules directory even though I specify for it to exclude it in the webpack config.
我怀疑但不是完全确定,错误是由于ts-loader 没有排除node_modules目录,即使我在webpack配置中指定要排除它。
I just want to be able to setup my webpack config (and my app) so that typescript can be transpiled and the app can be correctly bundled with webpack. 我只想能够设置我的webpack配置(和我的应用程序),以便可以编译打字稿并将应用程序正确地与webpack捆绑在一起。 Please help.
请帮忙。
Webpack.config.js Webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: './src/main.ts',
output: {
filename: './dist/bundle.js',
},
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: ['.ts', '.tsx', '.js'] // note if using webpack 1 you'd also need a '' in the array as well
},
module: {
loaders: [{
test: /\.tsx?$/,
exclude: /node_modules/,
loader: 'ts-loader'
}]
},
plugins: [
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
__dirname
),
]
};
package.json package.json
{
"name": "tiptip-webpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack -d --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@angular/common": "2.4.6",
"@angular/compiler": "2.4.6",
"@angular/core": "2.4.6",
"@angular/forms": "2.4.6",
"@angular/http": "2.4.6",
"@angular/platform-browser": "2.4.6",
"@angular/platform-browser-dynamic": "2.4.6",
"@angular/platform-server": "2.4.6",
"@angular/router": "3.4.6",
"@angularclass/conventions-loader": "^1.0.2",
"@angularclass/hmr": "~1.2.2",
"@angularclass/hmr-loader": "~3.0.2",
"core-js": "^2.4.1",
"http-server": "^0.9.0",
"ie-shim": "^0.1.0",
"jasmine-core": "^2.5.2",
"reflect-metadata": "^0.1.9",
"rxjs": "5.0.2",
"zone.js": "0.7.6"
},
"devDependencies": {
"source-map-loader": "^0.2.0",
"ts-loader": "^2.0.3",
"typescript": "^2.2.0",
"typings": "^2.1.0",
"webpack": "^2.2.0"
}
}
Error messages after running 'npm run build' 运行“ npm run build”后的错误消息
This is not a webpack problem but a TypeScript problem. 这不是webpack问题,而是TypeScript问题。 Webpack correctly ignores the
node_modules
but TypeScript complains because it doesn't know the types for Map
or Set
. Webpack正确地忽略了
node_modules
但是TypeScript抱怨,因为它不知道Map
或Set
的类型。 These are ES6 features and if you set the target
in your compilerOptions
to es5
it won't include these in the compilation and therefore doesn't know their types. 这些都是ES6的功能,如果你设定的
target
在compilerOptions
到es5
也不会在编译包含这些,因此不知道它们的类型。 From the compiler options documentation: 从编译器选项文档中:
Note: If
--lib
is not specified a default library is injected.注意:如果未指定
--lib
则会注入默认库。 The default library injected is:注入的默认库为:
► For --target ES5: DOM,ES5,ScriptHost►对于--target ES5:DOM,ES5,ScriptHost
► For --target ES6: DOM,ES6,DOM.Iterable,ScriptHost►对于--target ES6:DOM,ES6,DOM.Iterable,ScriptHost
You can set the lib
option to use es6
(or any higher version eg es2017
): 您可以将
lib
选项设置为使用es6
(或任何更高版本,例如es2017
):
"lib": ["es6", "dom"]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.