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

Question

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

我们有几个模块是webpack的"外部",

1. 我们的语言环境翻译字符串(根据所选语言环境单独加载)
2. 自己反应(从cdnjs加载)
3. 另外几个外部(从cdnjs加载)

我们看到的错误(通过Sentry)是无法找到resourceBundle,或者无法找到React.

我想知道是否这可能是因为在我们在入口点文件中启动代码之前没有等待onLoad事件.我一直在假设webpack正在处理onLoad,但它(通过文件webpack输出搜索之后)显示情况并非如此.在这种情况下,我需要将我的代码包装在iffe中,以便等待所有外部存在.

然后是es6和import语句,我想知道我是如何设法将该代码包装在iffe中,因为导入必须处于最高级别.....

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

Answer 1

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

如果你看一下该bootstrap.js文件的FEM/01.4-transpile分支es6-todomvc项目(用于当然,我的前端大师赛的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)

祝好运!