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

Posted 2023-03-13

【中文标题】为啥我在一个 webpack 项目上得到“意外的令牌导入”，而在另一个项目上却没有？

【英文标题】：Why am I getting "Unexpected token import" on one webpack project but not the other?为什么我在一个 webpack 项目上得到“意外的令牌导入”，而在另一个项目上却没有？

【发布时间】：2016-12-07 06:13:21

【问题描述】：

我有 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"
  

【问题讨论】：

那么这两个项目有什么不同呢？看起来打字稿在打包之前没有被编译。

我同意，但它在第一个项目上编译得很好

有机会进行 webpack 配置吗？

【参考方案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

【讨论】：

这也可以通过在 tsconfig.json 中设置“target”和“module”编译器选项来实现。

明确地说，在tsconfig文件中添加这一行"module": "commonjs"

如果我使用这个，我会得到这个错误：'exports is not defined'。

【参考方案2】：

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

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

【讨论】：

拯救了我亲爱的一天。

这没有帮助。

如果我使用这个，我会得到这个错误'exports is not defined'。

我认为我的问题是我试图使用 node 而不是 ts-node 运行 ts 文件。 HTH