为什么我在一个 webpack 项目上得到“意外的令牌导入”，而在另一个项目上却没有？

Question

我有 2 个工作方式不同的项目，我不知道有什么不同。我在一个项目中有以下内容...

// In .ts wile
import 'core-js/es6';
import 'reflect-metadata';

这在一个项目上效果很好，但是，另一个项目具有相同的 tsconfig.json 和 typings.json 以及我得到的 webpack 配置中配置的 ts-loader...

Uncaught SyntaxError: Unexpected token import

失败的 JS 上的转译 JS 看起来像这样......

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

    /* WEBPACK VAR INJECTION */(function(process) {import 'core-js/es6';
    import 'reflect-metadata';

稍后我会发布后续项目

所以我的问题是我错过了什么？打字稿定义是否未正确导入？我已经尝试再次运行 typings install 以排除这种情况。

更多信息

//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"
  }
}

Answer 1

我有一个类似的问题，我使用 ts 源文件中的 import 关键字使用 async\await 和 Promises（都是 ES6 构造）来导入其他 ts 模块。

我可以使用默认的 js 目标版本 (ES5) 使用 TypeScript 进行转译，这会产生转译错误，抱怨 async\await 和 Promise 关键字，但因为我实际上运行的是 Node 6.4.0。一切都在运行时运行。

在上述情况下，'Import' 关键字从 ts 转换为 js 为：

var BasePage_1 = require('./BasePage');

所以，我收到了 tsc 转译错误，但 Node 在运行时使用上述“导入”翻译工作正常。

如果我使用 -t 开关告诉 tsc 转译为 ES6，那么转译是干净的，没有错误，但 Node 会失败，因为它说它不理解发出的 js 文件中的“导入”关键字。

现在，tsc 为“导入”发出以下翻译：

从 './BasePage' 导入 { BasePage }；

所以，上面的翻译根本就不是翻译，并且 Node 在运行时使用 'Import' 关键字阻塞了 js 文件。

总结：

我解决了这个难题，使用这个命令行告诉 tsc 使用 ES6 库但发出正确的模块导入语法：

myTypeScriptSourceFile.ts -t ES6 -m commonjs

现在我得到了一个干净的转译，并且没有来自 Node.js 的运行时错误。因为现在'Import' 正在使用'require' 保留字正确翻译。

更多细节在这里： https://www.typescriptlang.org/docs/handbook/compiler-options.html https://www.typescriptlang.org/docs/handbook/module-resolution.html

Answer 2

已接受答案的补充对于忙碌的程序员，命令行选项也可以在tsconfig.json 文件中进行：

{
  "compilerOptions": {
    // ...other options
    "module": "commonjs", // add this
    "target": "es6", // and this
 }