Question

我正在尝试使用webpack对应用程序进行代码拆分，但是webpack并未为我的动态导入创建代码块。我在这里找到一个来源： https://davidea.st/articles/webpack-typescript-code-split-wont-work 这表示我需要将tsconfig文件中的模块属性从“ commonjs”更改为“ esnext”，以便打字稿编译器不会将我的动态导入语句简化为Promises，导致Webpack不知道它们是动态导入，因此无法创建动态大块。我遵循了这一点，在编译过程中，我可以看到正在创建的块！ !！但是，当尝试在我的Express应用程序中解析import语句时，编译器会出错，出现问题标题，因为这些ES导入不再被节点理解了。有谁知道这是否有可能实现？我想在节点中使用ES导入语句，但没有在tsconfig文件中将模块属性设置为“ commonjs”。我真的不想将所有import语句重构为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"
}}

节点版本：v8.11.3

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

“开始”：“ 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文件中的编译器选项；您可以使用tsconfig.json选项指定其他--project文件。与tsconfig.json一起使用的ts-node文件必须将module设置为commonjs（或省略，在这种情况下，ts-node将其默认设置为commonjs）为了即时编译生成Node可以理解的模块。对于使用tsconfig.json运行的服务器代码和使用Webpack打包的客户端代码，您可能需要使用单独的ts-node文件。

语法错误：意外的令牌导入-Node.js

1 个答案: