使用 require 修复的 es6 导入问题

Question

鉴于以下代码，我开始使用 bootstrap.js 文件：

import jQuery from 'jquery';

// jQuery
window.$ = window.jQuery = jQuery;

// Twitter bootstrap
import 'bootstrap-sass/assets/javascripts/bootstrap';

// Initialize theme
import './theme/bootstrap';

当我编译这个（使用 webpack）并在我的浏览器中运行它时，我从 bootstrap 收到了以下抱怨：'我需要 jQuery 才能工作......'

我不（现在仍然不）明白为什么不导入 jQuery，我将其设置为引导程序上方的全局窗口对象 1 规则。

但是，当我更改代码并删除所有导入时：

// jQuery
window.$ = window.jQuery = require('jquery');

// Twitter bootstrap
require('bootstrap-sass/assets/javascripts/bootstrap');

// Initialize theme
require('./theme/bootstrap');

这段代码运行良好，一切都按预期运行，但我一直认为 import 和 require 基本上是同一件事，而 import 只是被转译为 require 调用。显然情况并非如此，有人可以向我解释这里到底发生了什么以及为什么 require 正在工作而 import 不是吗？

Answer 1

import 语句在文件开始执行之前处理，这意味着import 语句相对于文件本身代码的顺序将无效。而require 调用只是函数调用，所以排序是有影响的。

在您的第一个示例中，所有导入都将在 window.$ = window.jQuery = jQuery; 行运行之前执行。