Nuxt項目支持import寫法的最新解決方案

最近在看Nuxt開發vue項目的視頻，視頻中講到Nuxt項目不支持es6的import寫法。並提供了解決方案：

1.在package.json中添加我標紅的部分：

 "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js --exec babel-node",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "test": "jest"
  },

 

2.根目錄創建babel配置文件.babelrc，如果已經存在該文件就修改

內容如下：

{
"presets":["es2015"]
}

 

3.安裝 babel-preset-es2015 

npm install babel-preset-es2015

 

4.重新執行 npn run dev 

視頻中介紹的就是這4個步驟。我截止寫文之前，網上搜索結果也基本是上面這種解決方案。

 

但是&重點來了！！！截止2019年1月，原有的  babel-preset-es2015  寫法已經廢棄，與之代替的是  babel-preset-env   或者  @babel/preset-env ，目前以后者為推薦。

 

下面說下如何實現用 @babel/preset-env  讓Nuxt 項目支持import 寫法。

 

1.安裝 @babel/cli、@babel/core、@babel/preset-env、@babel/node 這4個你項目中沒有安裝的包

npm install @babel/cli @babel/core @babel/preset-env @babel/node -D

想知道你已經安裝了哪些包，直接看 package.json 文件中的 "devDependencies" 。

 

這里提一下 @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。

 

2.修改.babelrc文件

{
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "node": "current"
            }
          }
        ]
      ]
    }
  }
}

 

3.修改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 node server/index.js --exec babel-node --presets  @babel/env",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "test": "jest"
  },

 

4.執行 npm run dev 即可，這時我們可以看到項目正常運行起來了。

 

其實也是開始提到的那4步。只是把版本升級了一下而已~~