使用babel 把es6語法轉(zhuǎn)成es5

我們寫代碼的時(shí)候，如果使用的是es6的語法，直接編譯，很多瀏覽器是不
支持，我們必須要轉(zhuǎn)成es5，廢話不多說，看代碼

1.初始化項(xiàng)目
npm init -y(-y跳過所有輸入步驟，直接生成package.json)

2.全局安裝babel
npm/cnpm install -g babel-cli

3.本地安裝babel 
cnpm/npm install --save-dev babel-preset-es2015 babel-cli

4.在根目錄新建一個(gè).babelrc文件，
里面的內(nèi)容為：{
  "presets":[
    "es2015"
  ],
  "plugins":[]
}

5.開始轉(zhuǎn)換
babel src/index.js -o dist/index.js

6.命令行轉(zhuǎn)換
如果每次都要輸入以上命令非常麻煩，我們可以在package.json里面設(shè)置一個(gè)命令
"scripts": {
    "build": "babel src/index.js -o dist/index.js"
  },
只要執(zhí)行 ：npm run build 就大功告成啦！

如果不夠清晰，請看以下截圖：
（1）目錄結(jié)構(gòu)：


image.png

（2）index.html


image.png

（3）package.json
image.png

（4）.babelrc
image.png

（5）src的index


image.png

（6）dist轉(zhuǎn)換后的代碼


image.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容