使用 ES6 导入时“未定义 jQuery”

Question

我的代码：

import $ from 'jquery'
import jQuery from 'jquery'
import owlCarousel from '../../node_modules/owlcarousel/owl-carousel/owl.carousel'

class App {
    …
    _initSlider() {
        $("#partners-carousel").owlCarousel();
    }
}

我在浏览器控制台中有“未定义 jQuery”。 怎么了？ 我可以在此类的方法中使用 jQuery 作为 $，但不能使用名称“jQuery”。

Answer 1

根据此评论并将其应用于您的案例，当您执行以下操作时：

import $ from 'jquery'
import jQuery from 'jquery'

您实际上并未使用命名导出。

问题是，当您执行import $ ... ， import jQuery ...然后import 'owlCarousel' （这取决于jQuery ）时，即使您在导入jquery后立即声明window.jQuery = jquery ，这些也会被评估。 这是 ES6 模块语义与 CommonJS 的 require 不同的方式之一。

解决这个问题的一种方法是这样做：

创建文件jquery-global.js

// jquery-global.js
import jquery from 'jquery';
window.jQuery = jquery;
window.$ = jquery;

然后在你的主文件中导入它：

// main.js
import './jquery-global.js';
import 'owlCarousel' from '../../node_modules/owlcarousel/owl-carousel/owl.carousel'

class App {
  ...
  _initSlider() {
    $("#partners-carousel").owlCarousel();
  }
}

这样您就可以确保在加载owlCarousel之前定义了jQuery全局owlCarousel 。

Answer 2

@Serge 你应该在你的问题中提到你正在使用 browserify 和 babelify 来捆绑/转换你的代码（我从评论中知道），这将帮助人们找到你问题的正确答案。

截至 2021 年，ECMA2015+/ES6+ 不允许在浏览器中原生使用import-maps/bare-module-path 。 所以基本上你不能直接在浏览器中执行以下操作，因为浏览器的行为不像 nodejs，它不了解如何/从哪里获取脚本源，你不能只说：

import $ from 'jquery'  
import jQuery from 'jquery'

但是，您可以借助 WebPack 之类的捆绑器来完成此操作，它为要在浏览器中使用的import-maps/bare-module-path打开了大门。 此外，目前正在做大量的工作来支持直接在浏览器中实现导入映射，而不需要打包器，但还没有实现。 我知道这个问题对于 OP 来说已经足够老了，但总的来说，您可以使用 WebPack 来捆绑您的代码并按照您提到的方式导入您的依赖项。

PS关于@egel在 2016 年 10 月提出的答案（这是当时解决方案有限的旧答案），有些人要求进行更多说明。 请注意Nicolás Bevacqua关于 ES6+ 模块范围的以下声明：

ES6 模块中的声明适用于该模块。 这意味着在模块内声明的任何变量都不能用于其他模块，除非它们作为模块 API 的一部分显式导出（然后导入到想要访问它们的模块中）。

ES6+ 模块系统很棒并且使事情更有条理，但是我们可以在浏览器中完全实现 ES6+ 模块而不需要打包器/转译器吗？ 这是一个棘手的问题。 当您的某些 JavaScript 依赖项只是不支持 ES6+ 模块系统的旧/经典脚本，并且不使用export关键字为您导出函数/值时，事情可能会变得更加困难。 在这里，开发人员倾向于做一些变通方法来解决手头的问题。 window对象用于附加函数/变量，以便在所有模块中使用它们。 在这里，窗口对象用作在代码库中的不同模块之间传输功能/数据的载体，但这不是推荐的方法。

以下引用自javascript.info ：

如果我们真的需要制作一个窗口级别的全局变量，我们可以将它显式分配给window并以window.user的身份访问。 但这是一个需要充分理由的例外。