admin管理员组文章数量:1644379
说在前面
某些时候,我们不得不考虑浏览器的兼容性,如今主流的浏览器,包括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://www.elefans.com/dianzi/1729383697a1199277.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论