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

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

# 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运行时被调用。

现在我需要找出的是，import语句的功能在chrome的更高版本中是否已更改，或者它始终在运行此代码而未被注意？

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

Answer 1

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

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

JavaScript导入语句运行代码

1 个答案: