公司项目原有的代码计划支持到 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… .