使用 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 的以下投诉：'I need jQuery to work...'

我不明白（现在仍然不明白）为什么 jQuery 没有被导入，我将它设置为上面的全局 window 对象 1 规则 bootstrap .

然而，当我更改我的代码并删除所有导入时：

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

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

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

这段代码运行得非常好，一切都按预期工作，但我一直认为 import 和 require 基本上是同一件事，而 import 只是让 t运行spiled 到 require 调用.这显然不是这种情况，有人可以向我解释这里到底发生了什么以及为什么 require 工作而 import 不工作吗？

Answer 1

import 语句在文件开始执行之前处理，这意味着 import 语句相对于文件本身代码的顺序将无效。 require 另一方面，调用只是函数调用，因此排序会产生影响。

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

使用 require 修复的 es6 导入问题

Issue with es6 import which was fixed by using require

import

jquery

require

twitter-bootstrap

ecmascript-6