各种资料都有显示说在node服务下,可以直接使用import等es6语法,但是亲测,使用import语法会报出SyntaxError: Unexpected token import ...
的错误;这样就需要去解决问题:
- 在node服务器而非webpack环境下使用import这样的语法,首先要安装
npm install @babel/register -D
在入口文件引入
require('@babel/register')({
... //
})
- 接着使用插件转es6语法,按照以前的使用,我们大概都会想起使用
babel-preset-es2015
,然后你会发现,这是过时的preset
,但是即使你使用@babel/preset-es2015
这样Babel7下的preset
,你还是会收到Cannot find module '@babel/preset-es2015' from '/...你的目录'
这样的报错提示,你会想为啥我已经安装了@babel/preset-es2015
,却提示找不到这个模块,这里,在查找资料后显示更新后的Babel,使用了@babel/preset-env
这个包替代了以前的一部分presets
,你需要安装它,并继续后续的工作; - 虽然我们完成了上一步,你的程序不再提示import的错误,但是还会报出其他的一系列的未知问题,我们程序的需求不一样,这一步提示的错误可能会不一样,举例,我的程序就提示了这样的一个报错:
/node_modules/convert-source-map/index.js:61
return SafeBuffer.Buffer.from(json, 'utf8').toString('base64');
^
TypeError: Cannot read property 'from' of undefined
at Converter.toBase64 (/Users/fengjun/LocalDocs/zz_myself_code/node_server/node_modules/convert-source-map/index.js:61:28)
at Converter.toComment (/Users/fengjun/LocalDocs/zz_myself_code/node_server/node_modules/convert-source-map/index.js:65:21)
...
这个看着就简单了,很显然是文件引入的错误,需要怎么解决呢?我这里给出一种解决方法,引入一个plugin,@babel/plugin-syntax-dynamic-import
;然后就运行OK了。
以上就是我解决Node服务下import出错的整个过程;
工程入口文件
代码如下:
require('@babel/register')({
plugins: ["@babel/plugin-syntax-dynamic-import"],
presets: ["@babel/preset-env"],
ignore: [],
extensions: [".es6", ".es", ".jsx", ".js", ".mjs"],
cache: true,
});
// 引入node服务入口文件
require('./server');
package.json
代码如下:
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.4.5",
"@babel/register": "^7.4.4"
}
网友评论