时间戳

首页 > 解决方案 > SyntaxError：意外的令牌导入 - Node.js

node.js - SyntaxError：意外的令牌导入 - Node.js

问题描述

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

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"
  ]
}

标签： node.jsreactjstypescriptwebpackes6-modules

解决方案

默认情况下，使用工作目录ts-node中文件中的编译器选项；您可以使用该选项tsconfig.json指定不同的tsconfig.json文件。您使用--project的文件必须设置为（或省略，在这种情况下默认为），以便动态编译生成 Node 可以理解的模块。您可能需要为运行的服务器代码和使用 Webpack 打包的客户端代码使用单独的文件。tsconfig.jsonts-nodemodulecommonjsts-nodecommonjstsconfig.jsonts-node

推荐阅读