场景分析(xb笔记可以跳):
基于vue-cli3.0项目打包完成后,用node做服务器渲染,发现生产的文件配置里使用require
进行包的导入,想让他也支持import
方式的导入(也就是想使用ES6的import/export代替require)
报错步骤:
→ 首先构建nuxt有两种方式,一种是模版的方式进行创建,第二种就是现在这种通过nuxt@2.0.0升级的脚手架构建方式进行构建nuxt文件,两种的区别:前者是通过babel进行处理后,所以里面是可以使用import进行导入内容的
后者是通过npm run dev
方式启动项目,其中dev中的命令是这样的"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server"
,他是通过node进行服务器的启动更新并没有经过babel处理,所以是不支持import
指令的,其中nodemon是监听和热更新的服务端脚本的,那我这个应该就不需要修改,我们应该考虑如何添加babel让它新增对import的识别,根据官网描述添加如下package.json
:
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node", //添加内容为 --exec babel-node
"build": "nuxt build",
"start": "cross-env NODE_ENV=production node server/index.js --exec babel-node",//添加内容为 --exec babel-node
"generate": "nuxt generate"
},
→ 接着在项目目录创建 .babelrc
文件(根目录),文件配置如下,主要是给bebal-node
配置指令集:
{
"presets": ["es2015"]
}
→ 其次通过命令行再安装一下对应的插件:
$ npm install babel-preset-es2015
→ 最后运行$ npm run dev
时出现下面这个报错:
$ npm run dev
> mt-app@1.0.0 dev ▒▒▒▒▒▒▒▒▒▒
> cross-env NODE_ENV=development nodemon --exec babel-node server/index.js --watch server
[nodemon] ▒▒▒▒▒
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: D:▒▒▒▒▒**/*
[nodemon] starting `babel-node server/index.js`
'babel-node' ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒еij▒▒▒
▒▒▒▒▒▒▒▒▒ļ▒▒▒
[nodemon] app crashed - waiting for file changes before starting...
然后查了一下文档和逛一下社区看看,最后试了一下这个方式,发现不报错了:
→ 安装的时候需要安装另外两个babel-core和babel-cli,即:
npm i babel-core babel-preset-es2015 babel-cli
记住安装完成后,重新编译npm run dev
,然后发现就不报错了;如果还会报错的话,将babel-preset-es2015卸载再重装一下,卸载命令npm uninstall babel-preset-es2015
,再重启一下就行了