Babel 經過語法轉換器支持最新版本的 JavaScript 。 它有很是多的插件,這些插件可以容許咱們馬上使用新語法,無需等待瀏覽器支持。
那咱們怎麼使用babel呢?
首先咱們來了解babel基本的安裝
第一:babel的安裝
第二:查看babel版本以及babel命令
第三步:創建文件夾,初始化一個倉庫,將咱們的配置寫成一個package.json文件。
第四步:新建一個文件,並單獨輸出其編譯以後的文件,這是單個文件的監聽。
第五步:新建文件夾,將以前所建的test.js文件移動到文件夾內,刪除以前監聽的輸出後的單個文件,再進行文件夾的監聽。
如今整個工程目錄以下
第六步:當咱們工程中須要使用babel的時候,咱們使用 cnpm install babel-cli --save-dev來進行安裝,當前項目依賴babel-cli。
咱們可使用babel-node去運行文件
接下來咱們來看看babel如何來解析ES6/ES7的語法。
第一步:建立.babelrc文件,在文件中寫入
第二步:下載相關的preset,並將babel去作一個監聽,將src目錄下的項目編譯到dist目錄下。
在文件中寫入
使用node
能夠看到這個編譯以後的代碼
編譯以前代碼以下
經過代碼能夠看到其實編譯出來的代碼並不精簡
咱們能夠經過安裝
再在.babelrc裏面進行修改
經過運行
查看編譯以後的結果,比以前的精簡許多。
若是咱們想babel還能夠編譯es2016的話,咱們能夠繼續安裝preset
要記得修改.babelrc文件。
若是想將gulp和babel結合使用完成一整套的工做流程,該怎麼作呢?
第一步:安裝gulp插件,刪掉以前輸出編譯以後文件的dist目錄
第二步:創建gulpfile.js,文件,寫入配置,運行。
很想把完整的demo也給你們看,已經上傳到github了:https://github.com/JserJser/reactDemo/tree/master/babel-cli/babel-demosreact