es6 babel 安裝以及使用


1,安裝好node(需要使用npm包管理工具)

2,在本地項目路徑下npm init,格式化成功后會在項目下生成一個配置文件package.json

3,本地安裝bable npm install --save-dev babel-cli (如需卸載之前的babel使用命令  npm uninstall --global babel-cli),

  安裝成功后,devDependencies(依賴)會出現一個"babel-cli": "^6.26.0"(命令行工具,這一步還只能使用命令行工具,並不能進行轉譯),

4,安裝轉譯依賴 npm install  --save-dev babel-preset-env(

  安裝成功后,devDependencies(依賴)會出現一個"babel-preset-env": "^1.7.0"

5,在package.json中配置babel ,轉譯規則需要安裝依賴 
  (npm install --save-dev babel-preset-es2015)

{
  "name": "es6-babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d lib"
  },
    //添加babel配置
  "babel":{
    //presets 定義轉譯規則
    "presets":["es2015"]
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

6,在命令行中調用babel,在package.json 中添加

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d lib"  //把src 下面的所有文件 轉譯放到lib 文件下面
  },

7,編譯es6代碼,新建連個文件夾src 和 lib ,因為我們上面命令用的是 babel src -d lib,然后運行編譯命令npm run build   就可以看到src 下面的文件被全部編譯對應的放在lib文件夾下面,需要使用直接引入lib文件夾下面對應的文件

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM