迹忆客 专注技术分享

有几种方法可以使用不同的平台导入 jQuery。本篇文章演示了将 jQuery 导入环境的不同方法。

使用 Script 标签导入 jQuery

这是在 HTML script 标签中导入 jQuery 文件的最常用方法。我们可以提供源链接或下载文件并提供源中文件的路径。

参见示例：

使用链接：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

使用下载的文件：

<script src="C:\Users\etc\jquery-3.6.0.min.js"></script>

这两种方法在基本的 jQuery 导入中都很有用。

使用 ES6 语法导入 jQuery

Babel 是下一代 JavaScript 编译器。Babel 具有编译 JavaScript 代码的 ES6 和 ES2015 模块的功能。

此方法仅支持 Babel 等编译器；浏览器不支持 ES6/ES2015。请参阅下面的如何使用 ES6 语法导入 jQuery。

import {$,jQuery} from 'jquery';
// to use jQuery
window.$ = $;
window.jQuery = jQuery;

或者更简单的方法：

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;

这两种方法对于像 Babel 这样的编译器都很方便。

使用 Browserify/Webpack 导入 jQuery

Browserify 和 Webpack 可以通过多种方式使用。我们可以在 Browserify/Webpack 中将 jQuery 作为变量导入。

参见示例：

var $ = require( "jquery" );

有关更多信息，可以在下面查看官方文档。

使用 AMD（异步模块定义）导入 jQuery

异步模块定义 (AMD) 是为浏览器创建的模块格式。我们可以使用函数在 AMD 中导入 jQuery。

参见示例：

define( [ "jquery" ], function( $ ) {
// code here
} );

有关 AMD 的更多信息，请参阅此处。