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

Question

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

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

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

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

关于失败的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

我有一个类似的问题,我使用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 transpile错误,但Node在运行时使用上面的'Import'翻译工作正常.

如果我使用-t开关告诉tsc转换为ES6,那么transile是干净的,没有错误但是Node失败了,因为它说它不理解发出的js文件中的'Import'关键字.

现在,tsc为'Import'发出以下翻译:

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

所以,上面的翻译实际上根本不是翻译,而且节点在运行时使用'Import'关键字在js文件上阻塞.

摘要:

我使用这个命令行解决了这个难题,告诉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
 }