Babel

　　Babel是一個JS的編譯器，能夠把瀏覽器不支持的特性編譯爲支持的代碼

 

安裝

node.js

　　安裝babel前，須要安裝node.js（babel的運行是基於node的）

　　在安裝完成後，運行命令提示符，輸入node -v和npm -v，若是都有輸出版本號則安裝成功

　　另外能夠在桌面/路徑文件夾中，按住Shift右鍵，在此處打開PowerShell窗口，在其中一樣輸入node -v和npm -v檢測是否成功安裝node.js

　　PowerShell的好處在於其路徑同你打開的目錄是一致的（例如在桌面打開，其最初的路徑就是桌面的路徑）

　　後續使用babel時須要注意目錄是否爲你的項目目錄

babel

　　參考Babel的中文網站

　　1.在你的項目路徑下初始化一個package.json文件，用來描述當前工程的信息（開發依賴、生產依賴、項目名、倉庫版本、項目名等）

　　能夠用npm init來初始化這個package.json文件，其中須要填寫衆多信息，若是用默認信息一路Enter過去便可

　　也能夠用npm init -y來初始化這個package.json文件，直接輸出一個信息所有爲默認值的一個package.json文件

　　若是windows下安裝失敗，須要用管理員模式打開cmd

　　2.安裝babel

　　用npm install --save-dev babel-cli來在當前目錄下安裝babel

　　也能夠簡寫爲npm i -D babel-cli

　　3.修改package.json

　　打開最初建立的package.json，在其中的scripts里加一個鍵值對build，值爲babel entry.js（以下）

　　

　　在項目的node_modules\babel-cli路徑下，能夠看到一個package.json文件，其中也能夠看到執行babel時的依賴（dependencies）

　　

 

babel的使用

　　首先能夠在項目的文件夾中建立一個entry.js文件，在其中寫一些ES6擴展的代碼（類、靜態方法、箭頭函數等）

　　

　　用npm run build命令，發現命令提示符中輸出了剛纔在entry.js裏寫的代碼

　　緣由在於剛纔在項目裏的package.json裏添加了build方法並寫了babel entry.js，也就是在執行build時會運行entry.js的內容，是npm管理工做流的一個好方法

　　

　　可是這裏的代碼和輸入的徹底同樣，緣由在於咱們沒有制定轉換的規則

　　這裏編譯前須要用npm i -D babel-preset-env指令安裝一個轉換規則的包，安裝完能夠看到package.json文件裏的依賴多了一行

　　

　　以後建立一個配置文件，用來告訴babel用什麼規則編譯代碼，文件名爲.babelrc（這個名稱是固定的），內部配置以下（注意保持JSON的格式）

　　

　　以後再次經過build指令編譯entry.js文件，能夠發現此時代碼已經被成功編譯了

　　

　　固然也能夠在env裏再添加更爲詳細的配置（例如能夠兼容最新一個版本的瀏覽器）

　　

　　更爲詳細的Browser取值能夠參考Browserlist網站（https://github.com/browserslist/browserslist）

　　可是目前爲止，編譯完的代碼只是輸出在命令行中，咱們須要在package.json裏的build添加-o index.js，表示編譯成功的代碼輸出到index.js文件中

　　

　　可是這裏每次修改代碼就須要人工從新編譯，所以咱們在build後添加-w（watch的縮寫，至關於監聽）（只要修改代碼就自動編譯）

　　

 

案例

　　ES6中有一些提案，例如用static聲明靜態屬性，但在JS中目前還不能夠實現，所以咱們能夠用babel的一些包，經過編譯來實現這些提案

　　用npm i -D babel-plugin-transform-class-properties安裝這個包

　　以後修改.babelrc文件，給其添加一個字段（每多一個插件就要多一個字段），以下

　　（關於babel的插件可在www.npmjs.com搜索）

　　

　　而後就能夠用static聲明靜態屬性了，代碼也會被實時編譯到index.js文件中