typescript - 为什么我在一个 webpack 项目上得到 "Unexpected token import"而在另一个项目上却没有？

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 看起来像这样......

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

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

我会在稍后发布成功的项目

所以我的问题是我错过了什么？ typescript 定义是否未正确导入？我已经尝试再次运行 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

我有一个类似的问题，我在使用 async\await 和 Promises(都是 ES6 结构)时使用 ts 源文件中的 import 关键字来导入其他 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 为“导入”发出以下翻译:

import { BasePage } from './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