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

【问题标题】：Do I need to use onLoad to start my webpack bundled code?我需要使用 onLoad 来启动我的 webpack 捆绑代码吗？
【发布时间】：2016-12-15 22:07:13
【问题描述】：

我们在生产中看到了一些在开发中似乎没有看到的奇怪东西。

我们有几个模块是 webpack 的“外部”，

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

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

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

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

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

【问题讨论】：

我会说是的。比仅仅猜测每个模块的加载时间要安全得多。
如果脚本标签有序，则无需等待load或DOMContentLoaded。您确定不是您的某些用户的互联网连接不好，所以加载早期的脚本只是偶尔会失败吗？
在一种情况下，我可以看到他们确实加载（使用 200）包含报告丢失的全局的文件。

标签： javascript webpack ecmascript-6 es6-modules

【解决方案1】：

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

如果您查看es6-todomvc 项目（用于my Frontend Masters course on Webpack）中FEM/01.4-transpile 分支上的the bootstrap.js file，您会注意到我正在使用一个$on 助手，它正在添加一个@987654328 @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)

祝你好运！

【讨论】：