JavaScript 导入语句 运行 代码

JavaScript import statements running code

在升级我们支持的浏览器 (~40 -> ~60) 后,我正在尝试诊断我们最近出现的问题

我们在位于 iffe 中的外部(现在不受支持)库中有此有效代码:

(function(window, undefined){
    # external library
    if(!window.terribleIdea){
        window.terribleIdea = {}
    }
    <some code>
    if(!window.terribleIdea.config.url){
        window.terribleIdea.config.url = 'the wrong url'
    }

    localStorage.set('somethingImportant', getStuff(window.terribleIdea.config.url))
})( window );

现在我们确实有了一个如下所示的 bootstap 类型文件:

# appBootstrapper.js
import applyConfig from './app/configApplier';
import ALL_ANGULAR_MODULES from './app'; # contains angular.module set up for 
                                         # app and every dependency

fetchConfig()
    .then(applyConfig)
    .then () => angular.bootstrap(document, [ALL_ANGULAR_MODULES])
    .catch( error => {
        alert(`It borked:  ${error.message}`)
    });

除其他外 applyConfig 做了:

window.terribleIdea = {
    config: {
        url: 'not terrible'
    }
}

现在发生的事情是,ALL_ANGULAR_MODULES 的导入语句结束了 运行 外部库中的代码,并设置了本地存储。我们 认为 曾经发生的是它只在 angular.bootstrap 运行.

被调用

现在我需要弄清楚的是,导入语句的功能在 chrome 的更高版本中是否发生了变化,还是它一直是 运行 此代码而未被注意到?

我能找到的只是对 Dynamic Imports 的引用,以及 <script></script> 标签中脚本的顺序 运行。

无法访问项目很难进行调试(请参阅上面评论中的讨论)。在遇到此类问题时,这里有一些值得探索的可能性。当然也有可能一直都是这样。

  • 捆绑器配置发生变化。 Webpack 接受 entries 作为数组,并且顺序很重要。
  • bundler/dependency 经理对动态 imports
  • 的反应方式发生变化
  • 您的应用程序在其 bootstrap 阶段加载其依赖项的方式发生了变化。它不是 (imo) angular 特定的,因为许多应用程序使用某种 "componentization" 来翻译以不同顺序执行的文件,它们被导入(因为它们可能只导出构造函数或诸如此类)。