JavaScript 导入语句运行代码答案

【问题标题】：JavaScript import statements running codeJavaScript 导入语句运行代码
【发布时间】：2018-09-17 10:46:36
【问题描述】：

在升级我们支持的浏览器 (~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 );

现在我们确实有一个如下所示的引导类型文件：

# 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 中，import 语句的功能是否发生了变化，还是它一直在运行这段代码而被忽视？

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

【问题讨论】：

您好，您没有使用任何打包工具，例如 webpack/browserify/rollup 吗？执行顺序似乎确实发生了变化，但我怀疑这是由于 chrome，更有可能是第三方库在无法访问其源代码/历史记录的情况下难以分辨其初始化方式。
@adz5A 我们使用 webpack 作为打包器。第三方库最近一次更改是在大约 2.5 年前。
ALL_ANGULAR_MODULES 如何“结束”运行代码？它是否明确导入它？如果不是，这个库是在 webpack 中加载的吗？使用自己的 entry: { thirdPartyLib: "./ } 或通过类似 entry: [ "./pathToThirdParty", "app.js" ] 的方式。查看更改的配置是否可能导致执行顺序发生意外更改。
@adz5A ALL_ANGULAR_MODULES 中的模块之一在导入链的某处有“import 'third-party-package'”。该库是我们依赖项的一部分，没有自己的加载器。
如果我不动手进行演示，就很难调试。我在 cmets 中暴露了我最好的猜测。我会试着去想别的。作为一个结论，我将研究：webpack 级别的配置更改，Webpack 捆绑依赖项的方式的行为更改，最后在角度级别的导入顺序机制的更改。抱歉，如果没有太大帮助。

标签： google-chrome bootstrapping javascript-import

【解决方案1】：

如果不访问项目就很难调试（参见上面 cmets 中的讨论）。在遇到此类问题时，这里有一些值得探索的可能性。当然也有可能一直都是这样。

捆绑程序配置的更改。 Webpack 接受 entries 作为数组，并在其中排序。
捆绑器/依赖管理器对动态imports 的反应方式发生了变化
更改应用程序在其bootstrap 阶段加载其依赖项的方式。它不是（imo）特定于角度的，因为许多应用程序使用某种“组件化”，它以不同的导入顺序执行文件（因为它们可能只导出构造函数或诸如此类）。

【讨论】：