admin管理员组文章数量:1644454
说在前面
某些时候，我们不得不考虑浏览器的兼容性，如今主流的浏览器，包括Chrome，Edge，Firefox，Opera，Safari都对ES6有了不同程度的支持，但是前端永远绕不过IE的坎，本节我们就针对IE的兼容性做功课。
很遗憾的告诉大家，从Vue3开始，已经放弃了对IE11的支持，如果仍然需要支持IE11或者更低的版本，仍然需要使用Vue2，这里为了说明下通过代码转码实现浏览器的兼容，准备了一个基于webpack 5.x的最小化demo。具体的搭建过程可以参考之前的文章。
代码结构
- src
-- index.js
-- index.html
- package.json
- webpack.config.js
// index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="bundle.js"></script>
</body>
</html>
index.js中，我们引入了es6几个特性，模板字符串，Symbol以及箭头函数。
// index.js
console.log(`string text line 1
string text line 2`);
console.log(typeof Symbol.iterator)
const materials = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
console.log(materials.map(material => material.length));
// webpack.config.js
const path = require('path');
module.exports = {
entry: {
index: './src/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
}
效果对比
在这之前我试用的是Edge浏览器，信息可以正常打印，此时我们把代码复制到IE浏览器，却只能看到：
这是因为在转换后的代码中有大量的ES6代码，IE浏览器无法识别这些语法,上面的错误提示点击跳转，发现是箭头函数未能识别，此时我们为代码添加babel-loader进行转码。
安装
更多细节可以参考webpack官网，target，babel-loader。
npm install -D babel-loader @babel/core @babel/preset-env
npm install -D @babel/plugin-transform-runtime
// webpack.config.js
const path = require('path');
module.exports = {
entry: {
index: './src/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
target: ['web', 'es5'],
module: {
rules: [
{
test: /\.m?jsx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime']
}
}
}
]
},
}
此时可以发现，编译后的代码中已经不存在箭头函数了。但是运行代码，还是会出现错误：
babel-polyfill收尾
babel-loader并不能完成所有es6的解码，此时报错信息提示Symbol未定义，详情可参考【解决】IE浏览器提示SCRIPT5009 “Symbol”未定义。
npm install --save babel-polyfill
在index.js首行添加 import 'babel-polyfill';然后执行打包命令。至此，IE浏览器已经不会提示任何错误了。
说到最后
其实不管是webpack4还是webpack5，Vue2或者Vue3，对于解决的思路都是大同小异的，只是不同版本可能有不同的实现方案，建议参考官方的例子，选择相应的版本，更重要的是掌握解决问题的思路，多动手，多思考。
版权声明：本文标题：从零开始搭建一个前端框架（六）通过babel实现浏览器兼容支持 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1729383697a1199277.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论