升級`HBuilder X`版本到`2.7.5.20200519`后編譯報錯`@babel/polyfill` is deprecated.md

目錄

• 升級后編譯報錯@babel/polyfill is deprecated
  • 緣由
  • 錯誤信息詳情
  • 相關線索
  • 解決方案

升級后編譯報錯@babel/polyfill is deprecated

緣由

1. 升級HBuilder X版本到2.7.5.20200519

2. 按照191031 - 部分手機出現或低版本Chrome異常"object.assign is not a function".md 進行修改

   外鏈地址

   1. 參考"解決方案5:[√有效的 最終采用的方案] - 修改uniapp-cli 編譯工具的源碼"
   2. 打開HBuilderX\Bin\plugins\uniapp-cli\babel.config.js
   3. 修改useBuiltIns: process.env.UNI_PLATFORM === 'h5' ? 'usage' : 'entry'為useBuiltIns: 'entry'

3. 然后開始編譯項目

4. 結果出現錯誤信息

錯誤信息詳情

13:31:24.838 請注意運行模式下，因日志輸出、sourcemap以及未壓縮源碼等原因，性能和包體積，均不及發行模式。
13:31:24.844 正在編譯中...
13:31:26.474  INFO  Starting development server...
13:31:30.105   `@babel/polyfill` is deprecated. Please, use required parts of `core-js`
13:31:30.110   and `regenerator-runtime/runtime` separately
13:31:41.245 文件查找失敗：'@babel/polyfill' at main.js:1

相關線索

1. 通過對比工具對比2個新舊文件夾

   1. HBuilderX\Bin\update\backup\plugins
   2. HBuilderX\Bin\plugins

2. 發現plugins\uniapp-cli\package.json里有"引用的類庫"版本變更了

   1. "@vue/cli-plugin-babel": "3.5.1",升級到了"~4.2.0",
   2. "caniuse-lite": "^1.0.30001038", 升級到了"^1.0.30001061"
   3. "@dcloudio/vue-cli-plugin-uni": "^2.0.0-26820200330001",升級到了27520200518001

3. plugins\uniapp-cli\node_modules\@babel\plugin-transform-runtime\lib\index.js

     if (has(options, "useBuiltIns")) {
       if (options.useBuiltIns) {
         throw new Error("The 'useBuiltIns' option has been removed. The @babel/runtime " + "module now uses builtins by default.");
       } else {
         throw new Error("The 'useBuiltIns' option has been removed. Use the 'corejs'" + "option to polyfill with `core-js` via @babel/runtime.");
       }
     }
   
     if (has(options, "polyfill")) {
       if (options.polyfill === false) {
         throw new Error("The 'polyfill' option has been removed. The @babel/runtime " + "module now skips polyfilling by default.");
       } else {
         throw new Error("The 'polyfill' option has been removed. Use the 'corejs'" + "option to polyfill with `core-js` via @babel/runtime.");
       }
     }
   
     if (has(options, "moduleName")) {
       throw new Error("The 'moduleName' option has been removed. @babel/transform-runtime " + "no longer supports arbitrary runtimes. If you were using this to " + "set an absolute path for Babel's standard runtimes, please use the " + "'absoluteRuntime' option.");
     }
   

4. plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\lib\h5\index.js

       const beforeCode = (useBuiltIns === 'entry' ? 'import \'@babel/polyfill\';' : '') +
         `import 'uni-pages';import 'uni-${process.env.UNI_PLATFORM}';`
   

5. Browser Compatibility | Vue CLI

   f the dependency ships ES5 code, but uses ES6+ features without explicitly listing polyfill requirements (e.g. Vuetify): Use useBuiltIns: 'entry' and then add import 'core-js/stable'; import 'regenerator-runtime/runtime'; to your entry file. This will import ALL polyfills based on your browserslist targets so that you don't need to worry about dependency polyfills anymore, but will likely increase your final bundle size with some unused polyfills.

解決方案

1. 打開plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\lib\h5\index.js
2. 修改const beforeCode = (useBuiltIns === 'entry' ? 'import \'@babel/polyfill\';' : '') +
3. 為const beforeCode = (useBuiltIns === 'entry' ? 'import \'core-js/stable\'; import \'regenerator-runtime/runtime\';' : '') +