先簡單說一下Babel吧

Babel是一個ES6轉碼器，可以將ES6代碼轉為ES5代碼

此篇教程是在學習阮老師的《ES6標準入門》時，不會npm的學習總結

在阮老師的教程上具體補充，通過以下幾個步驟，即可在項目中直接安裝Babel轉碼器，一行命令即可進行ES6轉碼

第一步：創(chuàng)建package.json

package.json 文件是一個描述文件，主要有以下3個作用：

1.描述項目依賴了哪些包

2.可以使用“語義化版本規(guī)則”指明項目依賴包的版本，表明接受更新的程度

3.與其他開發(fā)者分享

另外，package.json中，至少要有兩部分內容

"name"與"version"

這里只是簡單介紹，有興趣繼續(xù)深入的話看看文尾的鏈接吧

現(xiàn)在我們來創(chuàng)建一個package.json

1.打開cmd進入項目文件，輸入"npm init" `項目下安裝package.json

運行命令后會讓你配置各個部分

name與version處直接回車的話就默認按文件名和1.0.0的版本號配置咯，其他配置可以直接回車到最后

完成后，文件夾中就會出現(xiàn)一個package.json

第二步：創(chuàng)建Babel的配置文件.babelrc

.babelrc文件用于設置轉碼規(guī)則和插件，基本規(guī)則：

{"presets":[ ],"plugins":[ ]}

因為window下不可以直接創(chuàng)建空文件名的文件，所以我們用另存為的方式創(chuàng)建這個配置文件

新建文本輸入配置：

然后另存為（注意保存類型改為所有文件）

“新建文本文檔.txt"也就可以刪掉啦，后面配置時用NotePad打開就好

第三步：安裝規(guī)則集，設置.babelrc

上一步已經(jīng)創(chuàng)建好.babelrc了，接下來我們安裝規(guī)則集

preset字段設定轉碼規(guī)則，官方給了我們多個規(guī)則集，以下是安裝命令

//最新轉碼規(guī)則npm install --save-dev babel-preset-latest//react 轉碼規(guī)則npm install --save-dev babel-preset-react//不同階段語法提案的轉碼規(guī)則（4選1）npm install --save-dev babel-preset-stage-0npm install --save-dev babel-preset-stage-1npm install --save-dev babel-preset-stage-2npm install --save-dev babel-preset-stage-3

輸入

npm install --save-dev babel-preset-latestnpm install --save-dev babel-preset-react

在4選1中選npm install --save-dev babel-preset-stage-2

。。。。安裝中。。。。。

安裝完成！

安裝完成后我們可以在package.json中安裝的包

現(xiàn)在讓我們來設置.babelrc吧，如下圖

第四步：項目中安裝babel-cli,再改寫package.json

安裝babel-cli前，我們先創(chuàng)建一個存放js的文件夾吧，放等會用來轉換的js腳本，我把它命名為jsFolder

現(xiàn)在，輸入npm install --save-dev babel-cli安裝babel-cli

然后改寫package.json：在scripts中加入

????"build": "babel src -d lib"src：放置原js的文件夾路徑lib：放置轉換后js的文件路徑（沒有的話會自動創(chuàng)建）

按照創(chuàng)建的jsFolder，我們這樣子寫

ok！保存退出，現(xiàn)在我們可以一個命令轉換了

開始測試！

先在jsFolder中創(chuàng)建一個ES6代碼，我們用阮老師的例子

然后cmd中輸入npm run build

到lib中看看

嗯，然后就轉換完成了，就算jsFolder中有多個js命令，或者項目扔給其他伙伴，直接一個命令就可以完成轉換啦

參考資料：

? ? ? 《ES6標準入門（第3版）》

? ? ? ?npm 與 package.json 快速入門教程：https://blog.csdn.net/u011240...?? ??? ?BB%BA

總結

以上是生活随笔為你收集整理的项目中配置Babel转码器的详细教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。