项目背景:
我们的项目是在微前端qiankun的基础上包装的自己的框架,并打包上传到自己的npm上
开发子应用的时候通过npm下载自己框架@geip/portal-utils/lib/microApp,在入口文件直接使用即可
问题:由于框架本身对ie11的兼容性并不好或者没有兼容
知识点:1,babel-polyfill 的作用
2,webpack的transpileDependencies属性的作用
1,关于babel-polyfill
解释:babel-polyfill为当前环境提供垫片,babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。
举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。
例如:fetch方法,对于不支持的浏览器,网页中引入对应 fetch 的 polyfill 后,这个 polyfill 就给全局的window对象上增加一个fetch函数,让这个网页中的 JavaScript 可以直接使用 fetch 函数了,就好像浏览器本来就支持 fetch 一样,在这个链接上 https://github.com/github/fetch 可以找到 fetch polyfill 的一个实现。
安装:npm install --save babel-polyfill
在入口文件中引入:import 'babel-polyfill
2,vue-cli3的transpileDependencies属性的作用
默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来。
由于我们的项目中依赖qiankun及封装的框架等第三方库,这些库本身不兼容ie11,为了我们的项目能兼容ie11,就需要配置transpileDependencies,就会为该依赖同时开启语法转换和根据使用情况检测 polyfill
官网原句:
如果该依赖基于一个目标环境不支持的 ES 版本撰写: 将其添加到 vue.config.js
中的 transpileDependencies
选项。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill
module.exports = {
transpileDependencies: ["vue-plugin-load-script",'qiankun', 'import-html-entry'] // 需要编译的依赖包名
}