我们都知道,在ES6中新增了很的方法.
比如下面这些:
Array.prototype.forEachArray.prototype.mapString.prototype.startWith......
这些都是在ES6中新增的,如果一个浏览器并不支持ES6的语法,那么肯定也不会存在这些方法.
但是我们写代码的时候,又希望用到这些方法.
并希望,webpack在打包的时候,能够[有谁]可以帮我们判断一下.
如果当前的浏览器不支持这些方法的话,就使用平滑后退的方式去处理.
虽然 babel 可以转化 ES6 -> ES5.
但是对于 ES6 里面新增的这些方法,它就无能为力的.
babel 只处理语法层面的问题.不能处理API相关的问题.
webpack 仅仅是一个处理文件依赖关系,并打包的工具.
它更无能为力.
开始例子
首先定义一个 ES6FN.js 的文件.
let moduleName = 'es6方法'
export default {
moduleName,
useMap () {
console.log('usermap')
let obj = {
name: '李四',
age: 22
}
// Object.keys() ,map 都是 ES6 新增的方法.
return Object.keys(obj).map(key => {
return {
keyName: key,
keyValue: obj[key]
}
})
},
toString () {
console.log(`${this.keyName} ${this.keyValue}`)
}
}
首先用 webpack + babel 打包一次.
证明,babel 只能转换语法,不能转化API
查看结果
-
let->var -
userMap()->useMap:function(){}
说明语法转换确实完成.
-
Object.keys() & map()仍然存在,证明 babel 仅仅只能转化语法.
最终使用 webpack + babel 生成的代码.
虽然在语法层面成功的从 ES6 -> ES5.
但是由于代码中使用了 ES6 新增的一些方法.
所以,这份打包好的代码,最终在一些不支持 ES6特性的浏览器中,仍然是无法运行和使用的.
所以,仅仅是语法转化是不行的.
使用 babel-polyfill
babel-polyfill 是一个用于解析目标代码中,是否包含 ES6 新增方法的脚本.
如果它发现了里面有,就会以当前浏览器支持的方式转换这些方法以便可以正常运行.
之前在浏览器中,我们一般会这么引用.
<script src='babel-polyfill.js' />
<script src='es6-fn-in-this-file.js'></script>
其实也是同样的原理,
我们只需要在我们打包代码的最前面加载 babel-polyfill 的 js 代码即可.
npm i babel-polyfill
关于 babel-polyfill使用的两种方式
- 配置
webpack.config.js里的entry设置为entry: ['babel-polyfill',path.join(__dirname, 'index.js')]
运行打包 npm run build
打包成功.文件大小 280KB
- 在
webpack.config.js配置的主入口index.js文件的最顶层键入import 'babel-polyfill'
运行打包 npm run build
同样也打包成功.文件大小 280KB.
打开其中任意一份打包好的代码,查看 Object.keys().map() 方法是否仍然存在.
发现这些只属于 ES6的方法仍然是存在的.
那么 babel-polyfill 肯定是通过某种方式(垫片),添加了这些方法,让我们可以正常的这样去调用.
至于这些垫片加载哪,如何做到的..我没有在原始的代码中找到相应的位置.
本地也没有低版本的浏览器.所以暂时先不做测试.
使用 babel-plugin-transform-runtime
我们之前利用的 babel-polyfill ,使用垫片支持我们本来使用的ES6语法,
打包成功之后,文件的大小是 280KB
我们在看一下,之前没有使用 babel-polyfill 之前的打包出来的文件是多大.
两则相差大概 81.6倍
原因是 webpack 把 babel-polyfill 整体全部都打包进去了.
而babel-polyfill 肯定也实现了所有 ES6新API的垫片,文件一定不会小.
所以,文件变的这么大,也在常理之中了.
那么有没有一种办法,根据实际代码中用到的
ES6新增API ,来使用对应的垫片,而不是全部加载进去呢?
使用 babel 提供的 babel-runtime & babel-plugin-transform-runtime 就可以满足要求.
- 首先安装这两个包.
npm i --save-dev babel-runtime babel-plugin-transform-runtime
- 在
.babelrc里配置plugins:["tranform-runtime"]
最后运行 npm run build
打包结果
利用babel-runtime & babel-plugin-transform-runtime按需加载垫片的方式,最终打包出来的结果仅仅只是 17.4kb.比之前的 280KB要小了许多.
最后总结:
-
babel仅仅只能将es6->es5. 如果源代码中使用ES6新增的API(**Object.keys() & [].map()**),babel就无能为力了. -
babel-polyfill可以解决这个问题,但是会造成打包的文件大小变的巨大.-
babel-polyfill内部实现了所有的新API的垫片功能 - 在打包的时候,会将整个
babel-polyfill都打包进去. - 所以最终打包出来的文件,就会变的很大(280KB).
-
-
babel-runtime&babel-plugin-transform-runtime是babel提供的类似babel-polyfill功能的一个插件.- 它可以根据实际源代码使用到的
ES6新增API按需打入垫片. - 最终打包的大小结果是 : 17.4KB
- 它可以根据实际源代码使用到的
- 最重要的有点:不管是使用babel-polyfill
还是 babel-runtime & babel-plugin-transform-runtime 的目的就是:
转换那些我们写在源文件中的ES6方法添加垫片,
能够被无法识别的低浏览器也能够正常运行webpack最终打包出来的js文件.
babel 解决 语法层面的问题
babel-runtime & babel-plugin-transform-runtime解决API层面的问题.
