javascript - BabelJS和Webpack配置以获得最大的兼容性

Question

我的网站必须使用可想象的最基本的电话浏览器，因为我的用户群是非常基础的手机上的埃塞俄比亚农村 child 。 (我使用jquery来节省手机电池的电量，因为大多数是“回收的”，二手/二手/二手的，并且我对数据成本非常谨慎。)
我试图设置Babel + Webpack以便为尽可能低的可支持目标进行转换，但是我误解了Babel文档，(例如，我从@babel/preset-env开始，没有目标，因为我认为不针对目标意味着最大的兼容性，但这并不意味着) t polyfill)，并且无法针对我种类繁多的目标手机和浏览器进行测试。

以下配置是否会生成并 bundle 可在最大范围的浏览器上运行的Javascript？有什么办法使其更兼容？

我有useBuiltins=usage-下面的webpack配置是否可以检测到重复的导入和树抖动？如果不是，我需要更改什么，还是我的useBuiltins=entry中的require('core-js');require('regenerator-runtime/runtime')和index.js会更好？

使用import或require导入 bootstrap 会生成比 bootstrap 分发更大的文件，即使我在JS中未对其进行引用也是如此。如何使摇树工作？我不应该通过npm使用jquery吗？编辑:摇树仅发生在PROD构建上，并且似乎在以下配置下工作。

我可以安全地使用最新的jquery并依赖于polyfilling，而不是1.12，它存在安全性问题，但是我正在使用它，因为它可以在更多浏览器上使用？

因为webpack正在运行babel，我可以删除@babel/cli吗？ (它的工作原理是，我只想确保获得每盎司的polyfill和兼容性，如果更好的话，很高兴运行babel CLI。)

还有其他错过的机会/建议吗？

(如果相关的话，我不需要任何分块处理-这是一个简单的应用程序，并且可以无限期地进行缓存。我正在将其写入Django静态文件夹，而Django + whitenoise正在处理文件名指纹识别和HTTP压缩。我会在某个时候添加JS单元测试。我正在导入Bootstrap JS来进行polyfill和摇树(尽管Bootstrap似乎没有发生晃动)，但是直接从HTML加载Bootstrap CSS以避免更新应用程序时缓存丢失。) packages.json:

{
  ...
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production",
  },
  "devDependencies": {
    "@babel/cli": "^7.10.1",
    "@babel/core": "^7.10.2",
    "@babel/plugin-proposal-class-properties": "^7.10.1",
    "@babel/preset-env": "^7.10.2",
    "axios": "^0.19.2",
    "babel-loader": "^8.1.0",
    "bootstrap": "^4.4.1",
    "jquery": "^1.12.4",  // insecure old version but more compatible
    "popper.js": "^1.16.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.10.1",
    "core-js": "^3.6.5"
  }
}

.babelrc:

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": "cover 100%",
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

webpack.config.js:

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  output: {
    filename: 'app.js',
    publicPath: "/static/",
    path: path.join(__dirname, '../djangoproj/app/static/app')
  },
  devServer: {
    writeToDisk: true, // Django serves the content
  }
};

index.js:

import $ from 'jquery';
import bootstrap from 'bootstrap'
import popper from 'popper.js'
import {Controller} from './controller';

$(document).ready(function() {
  const app = new Controller()
})

controller.js:

import {View} from './view';
import {ActivityStore, ElementStore} from './store';
import {Api} from './api';

export class Controller {
  constructor() {
    this.state = {}
    this.api = new Api(config)

// and so on..

更新:我决定不按照@tfr的建议逐步进行polyfill(使用 <script type="module" ..)，因为对于我来说测试最低的手机比优化新手机更重要。如果我在较现代的测试设备上运行polyfill，则更有可能。就是说，如果有必要，可以将core-js claims只添加到polyfill中，所以我不确定 nomodules是否真的会超出 bundle 包的大小(我对此技术的理解是选择我相信更多的信息) 。我还决定直接从浏览器而不是 bundle 加载Bootstrap和Popper。我正在考虑生成 vendor.js，但不确定是否有任何优势，除了它们可能会在我的 bundle 包中的polyfill之前加载之外。
非常感谢。

Answer 1

通常，最好的方法是同时 bundle 双(现代浏览器和旧版)，因此您不必多填充现代设备。看看这个working polyfill example。

这就是您如何为现代浏览器加载es6和为旧版浏览器加载es5 bundle 包的方式:

  <!-- main bundle -->
  <script type="module" src="/assets/scripts/main.js"></script>
  <!-- polyfilled legacy browser -->
  <script nomodule src="/assets/scripts/main.legacy.js" defer="defer"></script>

这是您问题的主要答案:

Babel Config
============

const legacy = {
  presets: [
    ["@babel/preset-env", {
      targets: {
        browsers: [
          "> 1% in ET", // make sure its the right country code
          "ie >= 6",
          "not dead"
        ]
      },
      useBuiltIns: "usage",
      corejs: 3,
    }]
  ],
  plugins: [
    "@babel/plugin-syntax-dynamic-import",
    "transform-eval"
  ],
  comments: false,
  cacheDirectory: path.join(CACHE_PATH, 'babel-loader')
};


Webpack Config
==============

 const prod = {
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: [
          /node_modules/
        ],
        use: {
          loader: 'eslint-loader',
        },
      },
      {
        test: /\.js$/,
        exclude: [
          /node_modules/
        ],
        loader: "babel-loader",
        options: babelConfig
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.json'],
  }
};

snippets from https://github.com/unic/darvin-webpack-boilerplate/blob/master/webpack/settings/javascript-legacy/index.js