要点：

Question

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

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

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

未捕获的SyntaxError：意外的令牌导入

关于失败者的已编译的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

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

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

在上述情况下，＆＃39;导入＆＃39;关键字从ts转换为js as：

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

所以，我得到了tsc transpile错误，但Node在运行时运行良好，并且上面的＆＃39;导入＆＃39;翻译。

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

现在，tsc为＆＃39;导入＆＃39;：

发出以下翻译

从＆＃39; ./ BasePage＆＃39;;
导入{BasePage}

所以，上面的翻译根本就不是翻译，而且js文件中的节点扼流圈带有＆＃39;导入＆＃39;运行时的关键字。

要点：

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

myTypeScriptSourceFile.ts -t ES6 -m commonjs

现在我得到一个干净的transile并且Node没有运行时错误。因为现在使用'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
 }

为什么我在一个webpack项目上获得“意外的令牌导入”而不是另一个？

2 个答案:

要点：