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

2019年9月15日 215次阅读 来源: 题叶

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

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

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

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

大致安装一些依赖,

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…

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…

还有期待问题, 待补充

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

    原文作者：题叶
    原文地址: https://segmentfault.com/a/1190000019477441
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞