NodeJs最近的版本都開始支持ES6(ES2015)的新特性了,設置已經支持了async/await這樣的更高級的特性。只是在使用的時候需要在node后面加上參數:--harmony。但是,即使如此node也還是沒有支持全部的ES6特性。所以這個時候就需要用到Babel了。
項目地址:https://github.com/future-challenger/petshop
現在開始Babel
在開始使用Babel之前,假設
1.你已經安裝了nodejs,并且已經熟悉了Js。
2.你也可以使用npm安裝各種依賴包。
3.而且你也對ES6(后來改為ES2015)有一定程度的熟悉。
同時假設你已經安裝了yarn,并且也熟悉了yarn。Yarn最大的優點就是它比npm要快很多,因為yarn只把需要的庫下載一次,之后用到的時候直接使用本地緩存的版本。npm每次都會下載這些庫。這簡直就是浪費生命。如果你還沒有安裝yarn,也沒有關系,下面也會有npm的使用方法。
接下來開始安裝配置Babel。安裝babel-cli
yarn add babel-cli --dev // npm install --save-dev babel-cli
安裝babel的presets。
yarn add babel-preset-es2015 --dev // npm install --save-dev babel-preset-es2015
這個時候你就可以使用ES2015的特性了。但是,這還不夠,比如我不想用Promise我想用更加方便的async/await語法。只有es2015這個preset是不夠的。
Babel的plugin和preset
Babel本身不處理語言特性的轉碼。這些功能都是由plugin和preset實現的(preset也是一個plugin的集合)。如上文所述,要使用es2015的內容就需要安裝babel-preset-es2015這個preset。要使用async/await那么就需要安裝對應的preset或者插件。為了簡單我們安裝preset:babel-preset-stage-0。preset stage-0包含了async/await相關的插件: babel-plugin-syntax-async-functions、babel-plugin-transform-regenerator。
代碼如下:
yarn add babel-preset-stage-0 --dev // npm install --save-dev babel-preset-stage-0
這樣還是不能在項目中使用es7的async/await了。還需要更多的配置,有兩種方法可以達到目的:
1.使用babel-polyfill。有一個不好地地方,babel-polyfill會污染global對象,所以不適合于library之類的使用。僅適合于web app使用。
2.使用babel運行時轉碼工具,transform-runtime插件。使用這個方法正好彌補了上面的方法的不足之處。它是尤其適合于library一類的項目使用。
分別介紹這兩種方法。
安裝babel-polyfill:
代碼如下:
yarn add babel-polyfill --dev // npm install --save-dev babel-polyfill
之后,在你的項目的入口文件的最上方引入babel-polyfill。比如我現在有一個Express的Web App,那么的入口文件就是開啟這個app的index.js文件。在這個文件的最上方引入polyfill,
新聞熱點
疑難解答
圖片精選