怎樣設置babel-polyfill


https://segmentfault.com/a/1190000008706628

Babel 包括一個墊片

純個人理解
墊片
polyfill這個英文單詞在js babel中的翻譯可以說是墊片,本來指的是衣服中的填充物。
在這里可以說是為了使用某個瀏覽器或者其他執行環境不支持的函數或者對象能夠使用而添加的原型方法,或者第三方庫。

例如:

    • 我們想要使用es2015的語法中的某些新的對象方法或者數據類型,就需要添加babel-polyfill,例如Array.from方法很多瀏覽器不支持,你就需要墊片來提高兼容性。

    • 為了在版本低瀏覽器中能夠使用promise,我們需要提前執行一個promise文件,以便能夠在全局中使用。

,這個墊片包含定制過的regenerator runtimecore-js

他會模擬es6環境,並且傾向在應用中使用而不是當作一個庫或者工具。在使用babel-node時會自動加載。

這意味着你可以使用新的內置的東西如PromiseweakMap等。靜態方法如Array.from Object.assign等。實例方法Array.prototype.includegenerator函數(建議你使用regenator插件).polyfill會添加到全局的環境中,作為原生的原型如String那樣的方式執行。

如果正在尋找那些不會定義到全局的庫或者插件,查看transform-runtime插件。這樣的話你就不能夠使用上面提到的實例方法。如Array.prototype.includes

提示:
已使用ES2015的一些方法,不意味着你必須要使用babel-polyfill或者runtime plugin。你也許只是想要使用那些是需要用到的墊片(例如Object.assign),或者那些運行環境不存在需要加載的墊片。

安裝

命令行

npm install --save babel-polyfill

在Node/Browserify/webpack中使用

要使用墊片你需要在應用開頭的入口引入。
js

require("babel-polyfill")

如果你的英文入口使用ES6import語法,你應該在入口的開頭替代導入墊片,以保證他是最先加載的:
js

import 'babel-polyfill'

webpack.config.js中加入babel-polyfill到你的入口數組:
js

module.exports = { entry:["babel-polyfill","./app/js"] }

在瀏覽器中使用

在用npm下載的babel-polyfill文件中找到dist/polyfill.js文件。這個需要你在babel編譯代碼之前引入。你可以把它添加到你的編譯文件最前面或者用<script>標簽放到最前面。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM