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(
"babel-preset-env": "^1.7.0"安裝成功后,
devDependencies(依賴)會出現一個
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文件夾下面對應的文件