前端代碼兼容 Chrome 44 的部分操做記錄

公司項目原有的代碼計劃支持到 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... .