專案中配置Babel轉碼器的詳細教程
先簡單說一下Babel吧
Babel是一個ES6轉碼器,可以將ES6程式碼轉為ES5程式碼
此篇教程是在學習阮老師的《ES6標準入門》時,不是特別懂npm的學習總結
比較適合沒有用過npm的同學吧。
在阮老師的教程上具體補充,通過以下幾個步驟,即可在專案中直接安裝Babel轉碼器,一行命令即可進行ES6轉碼
第一步:建立package.json
package.json
檔案是一個描述檔案,主要有以下3個作用:
1.描述專案依賴了哪些包
2.可以使用“語義化版本規則”指明專案依賴包的版本,表明接受更新的程度
3.與其他開發者分享
另外,package.json中,至少要有兩部分內容
"name"與"version"
這裡只是簡單介紹,有興趣繼續深入的話看看文尾的連結吧
現在我們來建立一個package.json
1.開啟cmd進入專案檔案,輸入"npm init" `專案下安裝package.json
執行命令後會讓你配置各個部分
name與version處直接回車的話就預設按檔名和1.0.0的版本號配置咯,其他配置可以直接回車到最後
完成後,資料夾中就會出現一個package.json
第二步:建立Babel的配置檔案.babelrc
.babelrc檔案用於設定轉碼規則
和外掛
,基本規則:
{
"presets":[ ],
"plugins":[ ]
}
因為window下不可以直接建立空檔名的檔案,所以我們用另存為的方式建立這個配置檔案
新建文字輸入配置:
然後另存為
(注意儲存型別改為所有檔案)
“新建文字文件.txt"也就可以刪掉啦,後面配置時用NotePad開啟就好
第三步:安裝規則集,設定.babelrc
上一步已經建立好.babelrc了,接下來我們安裝規則集
preset欄位設定轉碼規則,官方給了我們多個規則集,以下是安裝命令
//最新轉碼規則 npm install --save-dev babel-preset-latest //react 轉碼規則 npm install --save-dev babel-preset-react //不同階段語法提案的轉碼規則(4選1) npm install --save-dev babel-preset-stage-0 npm install --save-dev babel-preset-stage-1 npm install --save-dev babel-preset-stage-2 npm install --save-dev babel-preset-stage-3
輸入
npm install --save-dev babel-preset-latest
npm install --save-dev babel-preset-react
在4選1中選npm install --save-dev babel-preset-stage-2
。。。。安裝中。。。。。
安裝完成!
安裝完成後我們可以在package.json
中安裝的包
現在讓我們來設定.babelrc
吧,如下圖
第四步:專案中安裝babel-cli,再改寫package.json
安裝babel-cli前,我們先建立一個存放js的資料夾吧,放等會用來轉換的js指令碼,我把它命名為jsFolder
現在,輸入npm install --save-dev babel-cli
安裝babel-cli
然後改寫package.json:在scripts中加入
"build": "babel src -d lib"
src:放置原js的資料夾路徑
lib:放置轉換後js的檔案路徑(沒有的話會自動建立)
按照建立的jsFolder,我們這樣子寫
ok!儲存退出,現在我們可以一個命令轉換了
開始測試!
先在jsFolder中建立一個ES6程式碼,我們用阮老師的例子
然後cmd中輸入npm run build
到lib中看看
嗯,然後就轉換完成了,就算jsFolder中有多個js命令,或者專案扔給其他夥伴,直接一個命令就可以完成轉換啦
參考資料:
《ES6標準入門(第3版)》