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" 来翻译以不同顺序执行的文件,它们被导入(因为它们可能只导出构造函数或诸如此类)。
在升级我们支持的浏览器 (~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" 来翻译以不同顺序执行的文件,它们被导入(因为它们可能只导出构造函数或诸如此类)。