从零开始搭建一个前端框架（六）通过babel实现浏览器兼容支持

最新推荐文章于 2023-04-23 14:44:09 发布

Run_youngman

最新推荐文章于 2023-04-23 14:44:09 发布

阅读量623

点赞数

分类专栏： Some meaningful 文章标签： javascript 前端 webpack

本文链接：https://blog.csdn.net/run_youngman/article/details/122920241

版权

Some meaningful 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

说在前面

某些时候，我们不得不考虑浏览器的兼容性，如今主流的浏览器，包括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，对于解决的思路都是大同小异的，只是不同版本可能有不同的实现方案，建议参考官方的例子，选择相应的版本，更重要的是掌握解决问题的思路，多动手，多思考。

Run_youngman

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从零开始搭建一个前端框架（六）通过babel实现浏览器兼容支持

说在前面某些时候，我们不得不考虑浏览器的兼容性，如今主流的浏览器，包括Chrome，Edge，Firefox，Opera，Safari都对ES6有了不同程度的支持，但是前端永远绕不过IE的坎，本节我们就针对IE的兼容性做功课。很遗憾的告诉大家，从Vue3开始，已经放弃了对IE11的支持，如果仍然需要支持IE11或者更低的版本，仍然需要使用Vue2，这里为了说明下通过代码转码实现浏览器的兼容，准备了一个基于webpack 5.x的最小化demo。具体的搭建过程可以参考之前的文章。代码结构- src-
复制链接

扫一扫