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

Question

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

我们有一些模块是 webpack 的“外部”，

1. 我们的语言环境翻译字符串(根据所选语言环境单独加载)
2. React 自身(从 cdnjs 加载)
3. 另外两个外部组件(从 cdnjs 加载)

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

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

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

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

Answer 1

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

如果你看the bootstrap.js file在 FEM/01.4-transpile 上分支机构 es6-todomvc 项目(用于 my Frontend Masters course on Webpack )，你会注意到我使用的是 $on添加 load 的助手window 的事件监听器.在应用程序完成加载后，拥有一个负责启动应用程序的(小)文件是 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)

祝你好运!