Webpack使用polyfill打包兼容低版本浏览器

使用webpack项目打包以后的项目在Chrome、Safari 下运行正常,但是在IE11下运行失败!提示 vuex requires a Promise polyfill in this browser。

一脸迷惑,原来是这样的。babel默认只转换语法,而不转换新的API,如需使用新的API,还需要使用对应的转换插件或者polyfill。例如,默认情况下babel可以将箭头函数,class等语法转换为ES5兼容的形式,但是却不能转换Map,Set,Promise等新的全局对象,这时候就需要使用polyfill去模拟这些新特性


babel-polyfill
原理是当运行环境中并没有实现的一些方法,babel-polyfill 会给其做兼容。 但是这样做也有一个缺点,就是会污染全局变量,而且项目打包以后体积会增大很多,因为把整个依赖包也搭了进去。所以并不推荐在一些方法类库中去使用。

安装:
npm install babel-polyfill --save-dev

用法:

//第一种:
entry: {
    app: ["babel-polyfill","./src/main.js"]
}        

//第二种:
entry: {
    app: "./src/main.js",
    "babel-polyfill":"babel-polyfill"
}
        
//第三种:
在main.js中全局import "babel-polyfill"

 


babel-runtime
为了不污染全局对象和内置的对象原型,但是又想体验使用新鲜语法的快感。就可以配合使用babel-runtime和babel-plugin-transform-runtime。 比如当前运行环境不支持promise,可以通过引入babel-runtime/core-js/promise来获取promise, 或者通过babel-plugin-transform-runtime自动重写你的promise。也许有人会奇怪,为什么会有两个runtime插件,其实是有历史原因的:刚开始开始只有babel-runtime插件,但是用起来很不方便,在代码中直接引入helper 函数,意味着不能共享,造成最终打包出来的文件里有很多重复的helper代码。所以,Babel又开发了babel-plugin-transform-runtime,这个模块会将我们的代码重写,如将Promise重写成_Promise(只是打比方),然后引入_Promise helper函数。这样就避免了重复打包代码和手动引入模块的痛苦。

用法
1. `npm install --save-dev babel-plugin-transform-runtime`
2. `npm install --save babel-runtime`
3. 写入 `.babelrc`
{
  "plugins": ["transform-runtime"]
}
启用插件babel-plugin-transform-runtime后,Babel就会使用babel-runtime下的工具函数,转译代码如下:

‘use strict‘;

var _defineProperty2 = require(‘babel-runtime/helpers/defineProperty‘);

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var key = ‘babel‘;  
var obj = (0, _defineProperty3.default)({}, key, ‘foo‘);  
不足
babel-runtime 不能转码实例方法,比如这样的代码:

‘!!!‘.repeat(3);  
‘hello‘.includes(‘h‘);  
这只能通过 babel-polyfill 来转码,因为 babel-polyfill 是直接在原型链上增加方法。
 

参考:

http://babeljs.io/docs/en/babel-polyfill/
https://www.jianshu.com/p/3b27dfc6785c

 

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
随机推荐
Express 使用模板引擎 EJS
WP_REST_Response 返回结果类
JavaScript Set 详解
Linux 网络流量监控 iftop
wp_signon() 自定义用户登录函数
JavaScript 流式传输数据 SSE (Server-Sent Events)
JavaScript requestAnimationFrame 定时刷新
冒泡法排序