【Babel】Babel5和Babel6区别

时间：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 会更合适。

参考文章

1. Babel 入门教程
2. babel 6 教程
3. babel的polyfill和runtime的区别

您可能还感兴趣？

1. 前端技术文章汇总