時(shí)間：2016-08-12 17:04:10
作者：zhongxia
地址：
babel 5.x -> 6.x 的變化非常大淆攻，許多模塊分離出去疑苔，只是一些文檔還語焉不詳音半，
1. Babel5中的require 和 Babel6中 require的區(qū)別琳袄？
Babel5中君旦，require 是 module.export 返回的值 或者 是 export default 返回的值澎办。
Babel6中， 如果采用 import 導(dǎo)入組件金砍， 可以直接獲取到 export default 的值局蚀， 但是如果是 require 導(dǎo)入的組件， 都必須要加上一個(gè) default恕稠。 不管你是 module.export 琅绅、export 、 export default 出來的值鹅巍。
//Home.jsx
class Home extends React.Component{
render(){
return (<div>Home</div>)
}
}
export default Home;
//index.js
//這兩個(gè)效果一樣
import Home from './Home'
const Home = require('./Home').default;
2. babel-polyfill和babel-runtime的區(qū)別千扶？
babel-polyfill會(huì)把a(bǔ)pi給內(nèi)置到 window去料祠。 讓不支持 ES2015的瀏覽器，可以正常使用相關(guān)的API
babel-runtime 是把
官網(wǎng)是這么說的澎羞，那些需要修改內(nèi)置api才能達(dá)成的功能髓绽，譬如：擴(kuò)展String.prototype，給上面增加includes方法妆绞，就屬于修改內(nèi)置API的范疇顺呕。這類操作就由polyfill提供。
2.1 babel-polyfill
babel 雖然可以轉(zhuǎn)換各種 ES2015 語法及 jsx括饶，但瀏覽器未提供原生支持的許多功能還是需要 polyfill株茶，比如 Promise。
我們只要在代碼中引入 babel-polyfill 就可以模擬出一個(gè) ES2015 的環(huán)境图焰，用法如下：
//安裝babel-polyfill
npm install babel-polyfill --save
//在入口文件中引用：
import babel-polyfill
2.2 babel-runtime
與 babel-polyfill 一樣启盛，babel-runtime 的作用也是模擬 ES2015 環(huán)境。只不過技羔，babel-polyfill 是針對全局環(huán)境的僵闯，引入它，我們的瀏覽器就好像具備了規(guī)范里定義的完整的特性 – 雖然原生并未實(shí)現(xiàn)堕阔。
babel-runtime 更像是分散的 polyfill 模塊棍厂，我們可以在自己的模塊里單獨(dú)引入颗味，比如require(‘babel-runtime/core-js/promise’)
超陆，它們不會(huì)在全局環(huán)境添加未實(shí)現(xiàn)的方法，只是浦马，這樣手動(dòng)引用每個(gè) polyfill 會(huì)非常低效时呀。我們借助Runtime transform插件來自動(dòng)化處理這一切。
至于要用 babel-polyfill 還是 babel-runtime晶默，則需要根據(jù)具體需求谨娜。舉個(gè)例子，如果一個(gè)庫里引用了 babel-polyfill磺陡，別人的庫也引用了 babel-polyfill趴梢，我們很可能會(huì)跑兩個(gè) babel-polyfill 實(shí)例，這里币他，使用 babel-runtime 會(huì)更合適坞靶。
