我正在尝试使用 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"
]
}
最佳答案
默认情况下,ts-node
使用工作目录下的tsconfig.json
文件中的编译器选项;您可以使用 --project
选项指定不同的 tsconfig.json
文件。与 ts-node
一起使用的 tsconfig.json
文件必须将 module
设置为 commonjs
(或省略,在在这种情况下,ts-node
将其默认为 commonjs
),以便即时编译生成 Node 可以理解的模块。您可能需要为使用 ts-node
运行的服务器代码和使用 Webpack 打包的客户端代码使用单独的 tsconfig.json
文件。
关于node.js - 语法错误 : Unexpected token import- Node. js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52603002/