使用Babel將es6轉換es5
目錄
Babel是什麼?
Babel是一個javascript編譯器即一個工具鏈，主要用於在舊的瀏覽器或環境中將ECMAScript2015+程式碼轉換為向後相容版本的javascript程式碼。
命令列轉換babel-cli
全域性環境下進行Babel轉換。這意味著，如果專案要執行，全域性環境必須有Babel，也就是說專案產生了對環境的依賴。
安裝
1) 安裝 babel-cli
$ sudo npm install --global babel-cli
2) 安裝預設
$ npm install --save-dev babel-preset -latest
3) 在專案中新增配置檔案
在當前專案的根目錄下建立該檔案 vim .babelrc
{
"presets":["latest"]
}
**:紅色標註的要保持一致,具體原因請看後面的配置檔案資訊
使用
轉換結果輸出到標準輸出
$ babel example.js
將結果輸出到指定檔案
$ babel example.js -o index.js
整個目錄轉碼 --out-dir 或 -d 引數指定輸出目錄
$ babel src -d lib
配置檔案
Babel的配置檔案是.babelrc,存放在專案的根目錄下。使用Babel的前，應先配置這個檔案。該檔案用來設定轉碼規則和外掛，基本如下:
{
"parsets":[],
"plugins":[]
}
parsets欄位設定轉換規則，官方提供以下規則集。
ES2015轉碼規則
$ npm install babel-preset-es2015 --save-dev
最新轉碼規則
$npm install babel-preset-latest --save-dev
不會過時的轉碼規則
$npm install babel-preset-env --save-dev
最後將這些規則加入.babelrc.例如 將最新轉碼規則加入
{“presets”:["latest"]}
babel-polyfill
Babel預設只轉換新的javascript語法，但並不轉換新的API，比如 Generator、Set、Symbol、promise等全域性物件，以及一些定義在全域性物件上的方法都不會轉碼。如果想讓這些方法執行則必須使用babel-polyfill。
安裝
$ npm install --save babel-polyfill
在js中使用
require("babel-polyfill");
將Babel整合到webpack中
Babel配置
1) 安裝babel-loader與babel-core
$ npm install babel-core babel-loader --save-dev
2)安裝預設
$ npm isntall babel-preset-latest --save-dev
3)配置.babelrc
{“presets”:["latest"]}
webpack配置
1)安裝webpack
$ npm install webpack webpack-cli --save-dev
2)新增配置檔案 webpack.config.js
const path=require('path');
module.exports={
entry:'./index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
},
module:{
rules:[{
test:/\.js$/,
use:'babel-loader'
}]
}
}
3) 修改package.json
"scripts":{
"build":"webpack"
}
4)打包
$ npm run bulid
可能會報如下錯誤:
cdCannot find module '@babel/core' [email protected] requires Babel 7.x,如果按我上面步驟我們裝的babel-loader是8.0.4版本，因為我們只需要重新裝7版本。
npm install [email protected] --save-dev
拓展
npm中 save與 save-dev區別
--save
會將依賴安裝到package.json 中的 dependencies中
--save-dev
會將依賴安裝在package.json中的devDependencies
"dependencies"：應用程式在生產中需要這些包,即專案上線後所依賴的環境。
"devDependencies"：這些包僅用於開發和測試,即開發中所需要的產品中就不需要。