[網頁設計] 教學：移除 Bootstrap 中的 jQuery

前言

jQuery 是 Bootstrap 的長期相依函式庫。由於 jQuery 先前的地位是網頁前端的準標準函式庫，這樣的配置不會有什麼問題。但現在 jQuery 已經不是網頁前端必備的函式庫了 (參考這裡)，為了使用 Bootstrap 就掛著 jQuery 其實是在浪費網頁頻寬。

在本文中，我們介紹把 jQuery 移出 Bootstrap，但 Bootstrap 仍可繼續運作的方式。

使用原生 JavaScript 取代 Bootstrap

Bootstrap 不是純 CSS 框架，而有用到 jQuery 等 JavaScript 函式庫。當我們把這些第三方函式庫抽掉時，得補上相對應的 JavaScript 程式碼。在本文中，我們用 bootstrap.native 專案所提供的 JavaScript 程式碼取代 jQuery 和其他函式庫。

Bootstrap Native 分別提供給 Bootstrap 3 和給 Bootstrap 4 使用的版本，讀者可依自己的需求擇一使用。

Bootstrap 3

在網頁的 <head> 中加上 Bootstrap 的 CDN：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" 
      integrity="sha256-bZLfwXAP04zRMK2BjiO8iu9pf4FbLqX6zitd+tIvLhE=" crossorigin="anonymous" />

並在網頁的 <body> 尾端加上 Bootstrap Native 的 CDN：

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.27/bootstrap-native.min.js"
        integrity="sha256-Mr+xCNUU1bmPAJ8MnSj24FJZRoSFRnebLo+mCNhAriU=" crossorigin="anonymous"></script>

由於新版的 Bootstrap.Native 不再支援 Bootstrap 3，想繼續使用 Bootstrap 3 的讀者請注意 Bootstrap.Native 的版本。

Bootstrap 4

在網頁的 <head> 中加上 Bootstrap 的 CDN：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" 
      integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />

並在網頁的 <body> 尾端加上 Bootstrap Native 的 CDN：

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/3.0.9/bootstrap-native.min.js"
        integrity="sha512-9GmNdRYmwA44BqGYClEdi+z0yNpFRQ/C+ebw3ZLeq6DT1A7uXB+VgiDTrqohA1uqeFyf4O580ddHxRJ6uQg3Og==" crossorigin="anonymous"></script>

由於新版的 Bootstrap.Native 仍然支援 Bootstrap 4，所以會和前一小節所用的版本相異。

使用其他方式安裝

請參考 Bootstrap Native 的官方文件。

支援舊瀏覽器 (Legacy Browser)

如果想要支援 Internet Explorer 的話，請在 <body> 的尾端加上 polyfill：

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.27/polyfill.min.js"
        integrity="sha256-H+ETBMCg8Q8bUrUF6YAtdAtyAJwmElEkpRePbFY3GjA=" crossorigin="anonymous"></script>

這段 polyfill 是為了補足 Bootstrap.Native 而寫的，所以放在 Bootstrap.Native 的程式碼之前即可，不需要放在 <head> 的部分。

如果前述的 polyfill 仍然不足的話，可使用 Financial Times 所提供的 polyfill.io 服務。

常見的 Boostrap Native 起始模版

綜合前文所述，我們在本節提供一個範例起始模板：

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="description" content="">

        <title>Hello Bootstrap Native</title>

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" 
            integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />

        <link rel="stylesheet" href="/css/app.css">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="container">
            <div id="app">
                  <h1>Hello Bootstrap Native</h1>
            </div>
        </div>

        <!-- Polyfill for Internet Explorer -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.27/polyfill.min.js"
            integrity="sha256-H+ETBMCg8Q8bUrUF6YAtdAtyAJwmElEkpRePbFY3GjA=" crossorigin="anonymous"></script>
        <!-- Bootstrap.Native, V4 version -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.27/bootstrap-native-v4.min.js"
            integrity="sha256-k5gE8gnbCCVtz/4z2LzbAIpMdH8K1Bjl4cTCjm6SZS8=" crossorigin="anonymous"></script>
    </body>
</html>

如果讀者有用到模板語言，就把這個範例模板放在 layout 的部分，並視需求填入模板的程式碼。

將 ES6+ 轉回 ES5 的方式

本文假定程式設計者使用原生 JavaScript 寫網頁前端程式。我們會直接使用 ES6+ 等新式語法，以取得較好的開發體驗，不會刻意守在 ES5。然後再用 TypeScript 或 Babel 把 ES6+ 的程式碼轉回等效的 ES5 程式碼。

使用 TypeScript 或 Babel 或其他的 JavaScript 轉譯器的缺點是轉出來的程式碼會比手刻的程式碼來得長一些。但在相容性的考量下，用 JavaScript 轉譯器繞過 JavaScript 本身的缺陷是不得不的方式。

由於 JavaScript 轉譯器並非 JavaScript 原生的功能，也沒有官方的專案生成器可用。現行的做法是自行建立一個模板專案，然後要開新的網頁程式專案時就拿該模板專案來用 (參考這裡)。

對於常寫網頁程式的開發團隊來說，自行建模板專案會比直接使用第三方模板專案更能掌握專案所用的網頁技術。筆者自己就建了個自用的模板專案，讀者可參考該專案來建立自己的模板專案。

測試舊瀏覽器的相容性

雖然我們在本文中介紹了數個相容於舊瀏覽器的方式，有時仍會在無意間寫入 Internet Explorer 無法使用的網頁 API。最好的方式還是在 Internet Explorer 上實地測試寫好的網頁程式。

由於微軟已經把舊版 IE 的虛擬機器拿掉了，得要自行花錢租用測瀏覽器相容性的雲端服務才行。這類型的服務供應商很多，讀者可自行上網搜尋一下。在這些雲端方案中，Browserling 和 LambdaTest 是相對便宜的。如果讀者不需要自動化測試等進階功能的話，可以考慮一下。

其他類似性質的專案

本文假定讀者寫原生 JavaScript 程式，且不使用額外的前端框架。若讀者有在用前端 JavaScript 框架，可參考以下專案：

關於作者

身為資訊領域碩士，位元詩人 (ByteBard) 認為開發應用程式的目的是為社會帶來價值。如果在這個過程中該軟體能成為永續經營的項目，那就是開發者和使用者雙贏的局面。

位元詩人喜歡用開源技術來解決各式各樣的問題，但必要時對專有技術也不排斥。閒暇之餘，位元詩人將所學寫成文章，放在這個網站上和大家分享。