typescript 为什么我在一个 webpack 项目上收到“意外的令牌导入”而不是另一个？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38711136/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why am I getting "Unexpected token import" on one webpack project but not the other?
提问by Hymanie
I have 2 projects that are working differently and I cannot tell what is different. I have the following on one project...
我有 2 个工作不同的项目，我不知道有什么不同。我在一个项目上有以下内容...
// In .ts wile
import 'core-js/es6';
import 'reflect-metadata';
This works great on one project, however, another project with the same tsconfig.json and typings.json as well as the ts-loader configured in the webpack config I get...
这在一个项目上效果很好，但是，另一个项目具有相同的 tsconfig.json 和 Typings.json 以及在 webpack 配置中配置的 ts-loader 我得到...
Uncaught SyntaxError: Unexpected token import
未捕获的语法错误：意外的令牌导入
The transpiled JS on the failing one looks like this...
失败者的转译 JS 看起来像这样......
/***/ function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {import 'core-js/es6';
import 'reflect-metadata';
I will post the succeeding project one in a bit
我将稍后发布后续项目
So my question is what am I missing? Are the typescript definitions not being imported properly? I already tried running typings installagain just to rule that out.
所以我的问题是我错过了什么？是否未正确导入打字稿定义？我已经尝试typings install再次跑步只是为了排除这种情况。
More Info
更多信息
//tsconfig
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
// Typings.json
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160602141332",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160621231320"
}
}
回答by Vance McCorkle
I had a similar issue where I was using async\await and Promises (both ES6 constructs) using the import keyword in the ts source files to import other ts modules.
我有一个类似的问题，我使用 ts 源文件中的 import 关键字使用 async\await 和 Promises（都是 ES6 构造）来导入其他 ts 模块。
I could transpile with TypeScript using the default js target version (ES5) which produces transpile errors complaining about the async\await and Promise keywords but since I'm actually running Node 6.4.0. everything actually works at runtime.
我可以使用默认的 js 目标版本 (ES5) 使用 TypeScript 进行转译，这会产生转译错误，抱怨 async\await 和 Promise 关键字，但因为我实际上运行的是 Node 6.4.0。一切都在运行时实际工作。
In the case described above, the 'Import' keyword was translated from ts to js as:
在上述情况下，“导入”关键字从 ts 转换为 js 为：
var BasePage_1 = require('./BasePage');
So, I'm getting tsc transpile errors but Node works fine at runtime with the above 'Import' translation.
因此，我遇到了 tsc 转换错误，但 Node 在运行时通过上述“导入”翻译工作正常。
If I use the -t switch to tell tsc to transpile to ES6 then the transpile is clean with no errors but then Node fails because it says it doesn't understand the 'Import' keyword in the emitted js file.
如果我使用 -t 开关告诉 tsc 转译为 ES6，那么转译是干净的，没有错误，但 Node 失败，因为它说它不理解发出的 js 文件中的“导入”关键字。
Now, tsc emits the following translation for 'Import':
现在，tsc 为“导入”发出以下翻译：
import { BasePage } from './BasePage';
从 './BasePage' 导入 { BasePage };
So, the above translation really isn't a translation at all and Node chokes on the js file with the 'Import' keyword at runtime.
因此，上述翻译实际上根本不是翻译，并且 Node 在运行时使用“Import”关键字在 js 文件上阻塞。
Summary:
概括：
I solved this conundrum using this command line to tell tsc to use ES6 libraries but to emit the proper module import syntax:
我使用这个命令行告诉 tsc 使用 ES6 库但发出正确的模块导入语法解决了这个难题：
myTypeScriptSourceFile.ts -t ES6 -m commonjs
Now I get a clean transpile and no runtime errors from Node. Because now 'Import'is being properly translated using the 'require'reserved word.
现在我得到了一个干净的转译，并且没有来自 Node.js 的运行时错误。因为现在'Import'正在使用'require'保留字正确翻译。
More details here: https://www.typescriptlang.org/docs/handbook/compiler-options.htmlhttps://www.typescriptlang.org/docs/handbook/module-resolution.html
更多细节在这里：https: //www.typescriptlang.org/docs/handbook/compiler-options.html https://www.typescriptlang.org/docs/handbook/module-resolution.html
回答by Cezar Augusto
addendum to the accepted answer for the busy programmer, the command line option can also be made inside tsconfig.jsonfile:
为忙碌的程序员所接受的答案的附录，命令行选项也可以在tsconfig.json文件中进行：
{
"compilerOptions": {
// ...other options
"module": "commonjs", // add this
"target": "es6", // and this
}
