node.js - 语法错误 : Unexpected token import- Node. js

Question

我正在尝试使用 webpack 对我的应用程序进行代码拆分，但 webpack 没有为我的动态导入创建 block 。我在这里找到了一个来源: https://davidea.st/articles/webpack-typescript-code-split-wont-work这表示我需要将我的 tsconfig 文件中的模块属性从“commonjs”更改为“esnext”，这样 typescript 编译器就不会将我的动态导入语句减少为 Promises，导致 Webpack 不知道它们是动态导入，因此不会创建动态 block 。我跟着这个，在编译过程中我可以看到正在创建的 block !哇哦!但是，当我尝试解析我的 express 应用程序中的导入语句时，编译器出现错误，我的问题标题中出现错误，因为这些 ES 导入不再被简化为 Node 可以理解的内容。有谁知道这是否有可能实现？我想在 Node 中使用 ES 导入语句，但没有将我的 tsconfig 文件中的模块属性设置为“commonjs”。我真的不想将所有导入语句重构为 commonJS require 语句。

tsconfig.json:

{
    "compilerOptions": {
        "target": "es6",
        "module": "esnext",
        "allowJs": true,
        "sourceMap": false,
        "inlineSourceMap": true,
        "strict": true,
        "strictNullChecks": true,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "noEmitOnError": true,
        "removeComments": false,
        "forceConsistentCasingInFileNames": true,
        "suppressImplicitAnyIndexErrors": false,
        "jsx": "react",
        "watch": false,
        "moduleResolution": "node"
}}

Node 版本:v8.11.3

我在我的 npm 脚本中使用 ts-node 来执行我的服务器代码:

"start": "webpack && ts-node -- ./src/service/index.ts --env=prod"

我的 .babelrc 如下所示:

{
    "presets": [
    "react",
    "stage-3",
    [
      "env",
      {
        "modules": false
      }
    ]
  ],
  "plugins": [
    "react-hot-loader/babel",
    "syntax-dynamic-import"
  ]
}

Answer 1

默认情况下，ts-node 使用工作目录下的tsconfig.json 文件中的编译器选项；您可以使用 --project 选项指定不同的 tsconfig.json 文件。与 ts-node 一起使用的 tsconfig.json 文件必须将 module 设置为 commonjs(或省略，在在这种情况下，ts-node 将其默认为 commonjs)，以便即时编译生成 Node 可以理解的模块。您可能需要为使用 ts-node 运行的服务器代码和使用 Webpack 打包的客户端代码使用单独的 tsconfig.json 文件。