我需要使用 onLoad 来启动我的 webpack 捆绑代码吗？

Question

我们在生产中看到了一些我们在开发中似乎看不到的奇怪事情。

我们有一些模块 "external" 到 webpack，

我们的语言环境翻译字符串（根据所选语言环境单独加载）
React 本身（从 cdnjs 加载）
另外两个外部组件（从 cdnjs 加载）

我们（通过 Sentry）看到的错误是找不到 resourceBundle，或者找不到 React。

我想知道这是否可能是由于我们在入口点文件中启动代码之前没有等待 onLoad 事件造成的。我一直假设 webpack 正在处理 onLoad，但看起来（通过文件 webpack 输出搜索后）情况并非如此。在这种情况下，我需要将我的代码包装在一个 iffe 中，以便它等待所有外部设备都出现。

然后是 es6 和 import 语句，我想知道我如何设法将该代码包装在一个 iffe 中，因为导入必须在顶层......

我知道浏览器没有改变，onLoad 仍然很重要，但是 webpack 是否以我刚刚忽略的某种微妙方式处理这个问题，或者我是否需要进入并将其添加到我的代码中。如果我需要添加它，在这种情况下我该如何处理 es6 导入？

Answer 1

是的，webpack 不会做任何事情来等待你的代码运行。它在代码加载后立即执行。这对于灵活性来说是一件好事，但这意味着您必须自己添加处理程序 (NBD)。

如果您查看 the bootstrap.js file on the FEM/01.4-transpile branch in the es6-todomvc project (used for my Frontend Masters course on Webpack)，您会注意到我正在使用一个 $on 助手，它正在向 window 添加一个 load 事件侦听器。在应用程序完成加载后，拥有一个负责启动应用程序的（小）文件是 IMO 的好方法。

这是另一个例子：

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

ready(function() {
  // start up your app
})

如果您有 jQuery，则不需要 ready 函数，只需执行以下操作即可：

$(function() {
  // start up your app
})

至于文件顶部的 ESModules，我的主要提示是一般原则，即您的模块在导入时不应执行任何操作。也许设置一些变量，但除此之外它们应该只导出函数。这使得它们更容易测试以及在这种情况下使用，所以你可以这样做：

import startApp from './start-app'

ready(startApp)

祝你好运！

我需要使用 onLoad 来启动我的 webpack 捆绑代码吗？

Do I need to use onLoad to start my webpack bundled code?

javascript

ecmascript-6

webpack

es6-modules