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

我们看到生产中有些奇怪的东西，我们在开发中看不到。我是否需要使用onLoad来启动我的webpack捆绑代码？

我们有一个是“外部”来的WebPack几个模块，

我们的现场翻译字符串（加载分别根据所选择的场所）
阵营本身（从cdnjs加载）
另外一对夫妇的外部（从cdnjs加载）

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

我想知道这是否可能是由于我们在入口点文件中启动代码之前没有等待onLoad事件引起的。我一直认为webpack正在处理onLoad，但它似乎（通过搜索文件webpack输出后）发现情况并非如此。在这种情况下，我需要将我的代码封装在iffe中，以便它等待所有外部存在。

然后是ES6和import语句，我想知道我如何管理来包装代码在IFFE因为进口必须在顶层.....

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

来源

2016-12-15 boatcoder

我会说是的。比仅仅花时间猜测每个模块何时加载更安全得多。 – XavCo7

如果脚本标签有序，则不需要等待'load'或'DOMContentLoaded'。你确定这不是你的一些用户有不好的互联网连接，所以加载早期的脚本偶尔会失败？ – loganfsmyth

在一个案例中，我可以看到他们确实加载了（包含全球报告缺失的文件）（200）。 – boatcoder

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

如果你看一下the bootstrap.js file上的es6-todomvc项目（用于my Frontend Masters course on Webpack）的FEM/01.4-transpile分支，你会发现，我使用的是$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())

祝你好运！

来源

2016-12-19 16:20:01 kentcdodds

放下额外的匿名函数来说'ready（startApp）;' – vidstige

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

回答

相关问题