1. 程式人生 > >Nuxt 2.3.X 配置babel

Nuxt 2.3.X 配置babel

1. 在package.json中修改執行指令碼

新增--exec babel-node

新增之後的效果為:(修改了8/10行)

{
  "name": "nuxt-learn",
  "version": "1.0.0",
  "description": "My lovely Nuxt.js project",
  "author": "wqzhai",
  "private": true,
  "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"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.0.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "cross-env": "^5.2.0",
    "element-ui": "^2.4.6",
    "koa": "^2.5.2",
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "nodemon": "^1.11.0"
  }
}

2.安裝編譯工具

npm i babel-cli   // 這是babel直譯器的客戶端主程式 
npm i babel-core   // babel的核心檔案,好像預設會自動安裝
npm i babel-preset-es2015 // 把程式碼轉換成ES6
npm i babel-preset-stage-0 // 把程式碼轉換成ES7

附上 babel配置-各階段的stage的區別

3.在根路徑建立.babelrc檔案,寫入配置

.babelrc

{
    "presets": ["es2015","stage-0"]
}

4.重新啟動專案即可