美文网首页
babel7+解决Node服务下import出错

babel7+解决Node服务下import出错

作者: 沃夫_ | 来源:发表于2019-06-24 15:14 被阅读0次

各种资料都有显示说在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"
  }

相关文章

网友评论

      本文标题:babel7+解决Node服务下import出错

      本文链接:https://www.haomeiwen.com/subject/zjfoqctx.html