一、前情摘要
使用npx create-nuxt-app创建Nuxt.js项目,项目默认使用require引入依赖,如下:
const Koa = require('koa')
而此时我们想使用ES6的 import
语法:
import Koa from 'koa'
运行的时候,会报 SyntaxError: Unexpected identifier
,即不识别import错误。
这是因为使用 npx create-nuxt-app
创建出来的Nuxt.js项目在 npm run dev
时直接使用node编译index.js,我们之前写的项目之所以可以,是因为有用babel去处理,也就是说,要想node本身支持 import
语法,那我们就要安装 babel
去处理。
二、解决方案
1、使用 babel-preset-es2015
前提:已安装babel-cli,还没安装可通过
npm install -g babel-cli
安装
(1)修改package.json,下图中红框部分,结合babel处理:
(2)项目根目录创建babel配置文件 .babelrc
并配置:
{
"presets": [
"es2015"
]
}
(3)安装 babel-preset-es2015
:
npm install babel-preset-es2015
最后重新运行 npm run dev
,问题解决。
但目前官方已经不推荐使用 babel-preset-es2015
,在你安装过程中,它会建议你使用 babel-preset-env
代替。
2、使用 babel-preset-env
步骤与方案1一样,不同之处是把安装babel-preset-es2015
改为 babel-preset-env
,再对应修改 .babelrc
文件即可:
{
"presets": [
"env"
]
}
3、使用 @babel/cli、@babel/core、@babel/preset-env、@babel/node
想知道你已经安装了哪些包,直接看 package.json 文件。
这里提一下 @babel/cli 与 babel-cli 的区别:
@babel/cli
是7.0以后的版本的命名方式,bable-cli
是之前的,如下图所示:
如果使用的是 7.0
以后的版本,则安装包都是以 @babel
开头的。
在babel 7.x 以前,babel-node通过安装bable-cli包即可。
但在Babel 7.x 以后,babel 的模块被被拆分。因此需要单独安装 @babel/node。
安装完后,修改package.json文件:
“scripts”: {
“dev”: "cross-env NODE_ENV=development nodemon
server/index.js --watch server --exec babel-node --presets @babel/env
",
“build”: “nuxt build”,
“start”: "cross-env NODE_ENV=production nodemon
server/index.js --exec babel-node --presets @babel/env
",
“generate”: “nuxt generate”,
“lint”: “eslint --ext .js,.vue --ignore-path .gitignore .”,
“test”: “jest”
}
最后运行 npm run dev
,问题即可解决,此时因为 package.json 文件中运行指令已经有了 --presets @babel/env
,所以并不需要再配置.babelrc
文件。
当然,你也可以在.babelrc
中写入:
{
"presets": ["@babel/env"]
}
而将 package.json 文件运行指令中的 --presets @babel/env
删除,效果是一样的。