Question

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

我们有一些模块是＆＃34;外部＆＃34;到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项目（用于es6-todomvc）的FEM/01.4-transpile分支上的my Frontend Masters course on Webpack，您会注意到我正在使用{{ 1}}帮助器，它向$on添加load事件监听器。在应用程序加载完成后，有一个（小）文件负责启动应用程序是一个很好的方法IMO。

这是另一个例子：

window

如果您有jQuery，则不需要function ready(fn) { if (document.readyState != 'loading'){ fn(); } else { document.addEventListener('DOMContentLoaded', fn); } } ready(function() { // start up your app })函数，只需执行：

ready

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

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

祝你好运！

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

1 个答案: