匯入 jQuery

1. 使用 Script 標籤匯入 jQuery
2. 使用 ES6 語法匯入 jQuery
3. 使用 Browserify/Webpack 匯入 jQuery
4. 使用 AMD（非同步模組定義）匯入 jQuery

有幾種方法可以使用不同的平臺匯入 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');

有關更多資訊，可以在下面檢視官方文件。

1. Browserify
2. Webpack

使用 AMD（非同步模組定義）匯入 jQuery

非同步模組定義 (AMD) 是為瀏覽器建立的模組格式。我們可以使用函式在 AMD 中匯入 jQuery。

參見示例：

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

有關 AMD 的更多資訊，請參閱此處。