TypeScript设为es2015模块时加载顺序异常，如何控制加载时机？

这确实是ES模块和CommonJS模块加载机制的核心差异导致的坑，我来帮你理清楚原因并给出几个可行的解决办法：

为什么ES模块会出现这个问题？ #

ES模块的import语句是静态分析阶段就会被处理的，不管你把它写在代码的哪一行，所有import都会被自动提升到模块的最顶部执行——这是ES模块规范的要求，目的是让引擎提前构建模块依赖树。而CommonJS的require()是动态执行的，只有运行到那一行才会加载模块，所以你在CommonJS模式下的代码顺序能正常生效。

这就是为什么你切换到"module": "es2015"后，console.log('jQuery before')执行时，jQuery已经被导入了，但此时你还没把它挂载到window上，Bootstrap加载时自然找不到全局的jQuery。

可行的解决方案 #

方案1：用动态import()延迟加载Bootstrap #

ES6+支持的动态import()函数是解决这类问题的最佳方案，它返回一个Promise，能让你在完成所有环境配置（比如挂载jQuery到window、创建虚拟tether/popper实例）之后，再手动触发Bootstrap的加载。

修改你的代码如下：

const win = <any>window;

console.log('jQuery before', {import: jQuery, win$: win.$, winJQuery: win.jQuery});
import * as jQuery from 'jquery';
win.jQuery = win.$ = jQuery;
console.log('jQuery after', {import: jQuery, win$: win.$, winJQuery: win.jQuery});

// 先完成所有环境配置：创建虚拟tether和popper实例
win.Tether = {};
win.Popper = {};

// 动态加载Bootstrap，确保依赖环境准备完毕
import('bootstrap')
  .then(() => {
    console.log('Bootstrap加载成功！');
  })
  .catch(err => {
    console.error('Bootstrap加载失败：', err);
  });

这种方式完全由你控制Bootstrap的加载时机，完美适配你的场景。

方案2：用Webpack的ProvidePlugin全局注入jQuery #

如果你不想修改业务代码，可以通过Webpack插件让jQuery自动成为全局变量，这样Bootstrap就能直接识别到它，不管是ES模块还是CommonJS模式都能正常工作。

在你的Webpack配置文件中添加：

const webpack = require('webpack');

module.exports = {
  // ...其他已有的Webpack配置
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery' // 明确挂载到window对象上
    })
  ]
};

配置完成后，你可以删掉代码中手动挂载jQuery到window的逻辑，Webpack会自动把jQuery注入到所有需要它的模块中，包括Bootstrap。

方案3：拆分配置模块，利用依赖顺序确保执行顺序 #

如果你的代码结构允许，可以把所有环境配置逻辑（挂载jQuery、创建虚拟实例）抽成一个单独的模块，然后先导入这个配置模块，再导入Bootstrap：

1. 创建setup-deps.ts文件：

const win = <any>window;
import * as jQuery from 'jquery';
win.jQuery = win.$ = jQuery;
// 配置虚拟tether和popper
win.Tether = {};
win.Popper = {};

2. 在主文件中导入：

// 先执行配置模块，确保所有依赖环境准备好
import './setup-deps';
// 再导入Bootstrap
import 'bootstrap';

ES模块会按照导入顺序依次执行模块，所以能保证Bootstrap加载前，所有配置都已完成。

总结 #

ES模块的静态导入提升是规范要求，没办法“取消”它，但上面的三种方案都能很好地解决你的问题：

• 动态import()灵活性最高，适合需要自定义加载时机的场景；
• Webpack的ProvidePlugin最省心，适合全局注入依赖的场景；
• 拆分配置模块则是最简洁的代码组织方式，适合结构清晰的项目。

内容的提问来源于stack exchange，提问作者menfon