运行代码的JavaScript import语句

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 );

现在我们确实有一个类似于这样的bootstrap类型文件：

# 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的import语句最终运行外部库中的代码，并设置本地存储。我们以往认为它只是在angular.bootstrap上运行。

现在我需要知道的是，导入语句的功能是否在更高版本的chrome中发生了变化，或者它是否一直在运行此代码并且没有被注意到？

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

Answer 1

没有访问项目就很难调试（参见上面评论中的讨论）。在遇到此类问题时，有一些值得探索的可能性。它当然可能一直如此。

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