Javascript BabelJS和Webpack配置实现最大可能的兼容性

我的网站必须使用最基本的手机浏览器，因为我的用户群是埃塞俄比亚农村的孩子，他们使用非常非常基本的手机。（我使用jquery来节省手机电池，因为大多数都是“回收的”、二手/三手/四手和老式的，而且我对数据成本非常谨慎。）

我正试图设置Babel+网页包，以便为尽可能低的可支持目标进行传输，但我误解了Babel文档（例如，我从

@Babel/preset env

开始，没有目标，因为我认为没有目标意味着最大的兼容性，但这并不意味着多填充），而且无法针对我的大量目标手机和浏览器进行测试

• 下面的配置是否会生成并绑定在尽可能多的浏览器上运行的Javascript？有没有办法使它更兼容

• 我有

  useBuiltins=usage

  -下面的网页配置是否会检测到重复导入和树抖动？如果不是，我需要更改什么，或者

  useBuiltins=entry

  和

  需要（'core-js'）；我的
  index.js
  中需要（'registrator-runtime/runtime'）

  更好吗

• 使用

  import

  或

  require

  导入引导会生成一个比引导发行版更大的文件，即使我在JS中没有提到它。我怎样才能让摇树工作？我不应该通过npm使用jquery吗？编辑：树抖动只发生在PROD构建上，并且似乎正在使用以下配置

• 我可以安全地使用最新的jquery并依赖polyfilling而不是1.12吗？1.12有安全问题，但我在使用它时，它可以在更多的浏览器上工作

• 我可以删除

  @babel/cli

  ，因为webpack正在运行babel吗？（它是有效的，我只是想确保我得到了每盎司的polyfill和兼容性，如果更好的话，我很乐意运行babel CLI。）

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

（如果相关，我不需要任何分块-这是一个简单的应用程序，我正在无限期缓存。我正在将其写入Django静态文件夹中，Django+whitenoise正在处理文件名指纹和HTTP压缩。我将在某个时候添加JS单元测试。我正在导入用于多边形填充和树抖动的引导JS（虽然引导看起来没有摇晃），但直接从HTML加载引导CSS可以避免在更新应用程序时缓存丢失。）

packages.json

：

.babelrc

：

webpack.config.js

：

index.js

：

controller.js

：

---

更新：我已决定不逐步使用polyfill（使用

通常最好的方法是同时捆绑dual（现代浏览器和旧版），因此您不必使用polyfill现代设备。请看一下

这就是如何加载es6 for modern和es5 bundle for legacy browser的方法：

  <!-- 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>

为什么不在严格的ES5中工作呢？这可能会让人有些畏缩，但ES5仍然是完全有效的js&es6做的事情并不多，ES5做不到，这就是我最初如何开始的，手动填充，但是，尽管它是一个基本的、相当简单的jquery应用程序，但数据有点复杂，它立即成为一个经典的旧js代码ll，所以我想使用结构化架构（存储、模型、类似传奇的控制器和视图），导入、类和箭头函数使它变得更好！我也希望我可以使用更安全的jquery版本，自动多边形填充将比研究和测试更可靠。此外，我编写ES2016的时间太长了，我无意中使用了现代语法，但在我的现代测试设备上没有发现它。男孩，我很高兴成为一个后来采用的人……有var&let和传统的vs arrow函数之间有很多细微差别，我只是试着做一些细微的改变……在2016/17年，我为一个vue项目做了很多es6，这里有一个链接到我的一些更好的es5，我发现它使用的模式非常方便，可以防止js发球，我专门将它链接到了一个jquery上ng被重新设定为一个承诺，以防有所帮助。&祝你好运！我真的建议使用一个工作的双网页包样板文件，例如darvin.dev并自定义设置。
nomodule
一个很好的建议谢谢。我需要
@babel/plugin syntax dynamic import
为网页包4提供什么帮助？（我的客户将是最低的1%的浏览器。）我如何使用一个
npm
命令创建两个版本？非常感谢！一个功能齐全的现代样板文件和双版本传统浏览器将花费您数周的时间，但没有经验。1）安装Darvin 2）安装样板文件以查看演示文件3）试着去理解不同的构建，这样你就可以省去你的巨大努力。重要的是，您在babel配置的@babel/preset-env.targets.browser中设置了正确的设置，请参见示例->in:es6 arrow function out:es5 funcI我不怀疑，这个问题是babel的核心团队说，它自2015年以来就不可能工作了，如果有，但确实工作了，因为babel是魔法，而不是科学。我开始明白为什么医生们这么不清楚，而我却没有得到任何答案——唯一了解它的人住在山洞里，施咒并与鬼魂交谈……你的思维太学术化了。不要担心螺丝刀的形状，拧紧螺丝。顺便说一句，你的评论适用于整个NPM生态系统，依赖性的数量是一团糟
{
  "presets": [
    [
      "@babel/env",
      {
        "targets": "cover 100%",
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

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
  }
};

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

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

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..

  <!-- 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