Nuxt项目支持import写法的三种解决方案

一、前情摘要
使用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 删除，效果是一样的。