时间：2016-08-12 17:04:10
作者：zhongxia
地址：
babel 5.x -> 6.x 的变化非常大，许多模块分离出去，只是一些文档还语焉不详，
1. Babel5中的require 和 Babel6中 require的区别？
Babel5中，require 是 module.export 返回的值 或者 是 export default 返回的值。
Babel6中， 如果采用 import 导入组件， 可以直接获取到 export default 的值， 但是如果是 require 导入的组件， 都必须要加上一个 default。 不管你是 module.export 、export 、 export default 出来的值。
//Home.jsx
class Home extends React.Component{
render(){
return (<div>Home</div>)
}
}
export default Home;
//index.js
//这两个效果一样
import Home from './Home'
const Home = require('./Home').default;
2. babel-polyfill和babel-runtime的区别？
babel-polyfill会把api给内置到 window去。 让不支持 ES2015的浏览器，可以正常使用相关的API
babel-runtime 是把
官网是这么说的，那些需要修改内置api才能达成的功能，譬如：扩展String.prototype，给上面增加includes方法，就属于修改内置API的范畴。这类操作就由polyfill提供。
2.1 babel-polyfill
Paste_Image.png
babel 虽然可以转换各种 ES2015 语法及 jsx，但浏览器未提供原生支持的许多功能还是需要 polyfill，比如 Promise。
我们只要在代码中引入 babel-polyfill 就可以模拟出一个 ES2015 的环境，用法如下：
//安装babel-polyfill
npm install babel-polyfill --save
//在入口文件中引用：
import babel-polyfill
2.2 babel-runtime
与 babel-polyfill 一样，babel-runtime 的作用也是模拟 ES2015 环境。只不过，babel-polyfill 是针对全局环境的，引入它，我们的浏览器就好像具备了规范里定义的完整的特性 – 虽然原生并未实现。
babel-runtime 更像是分散的 polyfill 模块，我们可以在自己的模块里单独引入，比如require(‘babel-runtime/core-js/promise’)
，它们不会在全局环境添加未实现的方法，只是，这样手动引用每个 polyfill 会非常低效。我们借助Runtime transform插件来自动化处理这一切。
至于要用 babel-polyfill 还是 babel-runtime，则需要根据具体需求。举个例子，如果一个库里引用了 babel-polyfill，别人的库也引用了 babel-polyfill，我们很可能会跑两个 babel-polyfill 实例，这里，使用 babel-runtime 会更合适。
网友评论