前端代码兼容Chrome44的部分操作记录

公司项目原有的代码计划支持到 Chrome 49, 特殊项目需要支持到 Chrome 44.

从网上可以找到 Mac 上的 dmg 安装文件, 这个页面能拿到 Chrome 48,
https://www.slimjet.com/chrom&＃8230;

安装以后需要指定一个目录启动, 否则低版本浏览器读取高版本的配置, 会报错,
--profile-directory=chrome-old/

网上有 Webpack 配置使用 Babel 的详细教程,
https://medium.com/@zural143/&＃8230;

大致安装一些依赖,

yarn add --dev @babel/core @babel/plugin-proposal-object-rest-spread @babel/preset-env babel-loader @babel/plugin-syntax-dynamic-import

Webpack 部分的配置大致是,

{
test: /\.js$/, //Regular expression
exclude: /(node_modules|bower_components)/,//excluded node_modules
use: {
loader: "babel-loader",
options: {
babelrc: false,
presets: ["@babel/preset-env"], //Preset used for env setup
plugins: ["@babel/plugin-proposal-object-rest-spread", "@babel/plugin-syntax-dynamic-import", "@babel/plugin-transform-arrow-functions"],
}
}
}

加了 babelrc: false, 然后没有配 .babelrc, 免得两个的配置绕在一起.

一些的对应的版本号从 babel 配置可以推测,
https://github.com/babel/babe&＃8230;

Chrome 48 就已经不支持解构赋值了, 所以需要 Babel 转换,
另一个是 Chrome 45(还是 47?) 的箭头函数, 很多第三方模块也在用, 需要转换,
我们代码当中用到动态 import, 也需要转换.
目前主要是这几个.

编译通过以后遇到报错, regeneratorRuntime is not defined,
网上给出的方案是在代码最开头引用 polyfill 代码(不过我写在 Webpack 配置里),

import "@babel/polyfill";

由于需要转换的代码分散在 tsx 跟 js 里, 包括 node_modules/ 当中的代码,
参考配置文档分开写了 exclude: /node_modules/ 跟 include: /node_modules\/query-string/ 的代码,
https://webpack.js.org/config&＃8230;

还有期待问题, 待补充

其他关于积梦前端的模块和工具可以查看我们的 GitHub 主页 https://github.com/jimengio .
招聘的计划和条件也在 GitHub 上有给出 https://github.com/jimengio/h&＃8230; .