JavaScript 导入语句运行代码

Question

在升级我们支持的浏览器 (~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> 标签中脚本的顺序运行。

Answer 1

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

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

JavaScript 导入语句运行代码

JavaScript import statements running code

google-chrome

bootstrapping

javascript-import

JavaScript 导入语句 运行 代码

JavaScript import statements running code

google-chrome

bootstrapping

javascript-import

JavaScript 导入语句运行代码