其實 JavaScript 早期只是一個腳本式語言，做做 HTML DOM 的簡單變化而已。也許直接寫在 HTML 裡，也許引用幾支 JS 檔，這樣而已。

2010 年 AngularJS 問世，開啟了 201x 年前端工程的飛速成長，包含各種前端框架的興起，與 Single Page Application (單頁式網站)。AngularJS 後來變成了 Angular，加上 React、Vue.js，這三大家前端框架維持了好一段時間。

延伸閱讀，後來 Laravel 預設的前端框架從 Vue.js 改為使用 Alpine.js (我的文章)

2015年，JavaScript ECMAScript 2015 發布，也稱為 ES6。為什麼是 6 這個數字？是 JavaScript 這個語言的第 6 版。也就是從 ES6 開始，JavaScript 導入了模組化的概念以及語法。

ES6 的 import、export

基本上一個 JS 檔案就是一個模組，用 export 語法，將你想要輸出的變數、函式、物件、類別，都可以輸出。例如

export const your_var = 'test';

export function your_func() {
    // …
}

假設上面檔案叫 your_module.js。你可以在 HTML 裡直接輸入 JS 模組，注意一定要寫 type="module"，且 import 的後方是大括號

<script type="module">
    import { your_var, your_func, your_object, your_class } from './your_module.js';

    // 就可以使用 your_var, your_func …
</script>

或是在另一支 JS (假設名稱是 abc.js) 裡面 import，HTML 直接引用 abc.js，注意一樣要寫 type="module"。也就是 your_module.js 的變數輸入到 abc.js，並在 abc.js 執行

<script type="module" src="./abc.js"></script>

輸出或輸入都可以改變數名稱

在輸出時可以改變數名稱

export { your_var as new_name, your_function as new_func };

當然，輸入時就要用新名稱輸入。

輸入時也可以改名

import { your_var as new_name } from "./your_module.js";

這樣在輸入模組就是用新名稱。

還有一種寫法也滿常見的，把整個模組輸入

import * as your_module from './your_module.js';

your_module.func_a();  // 在 your_module.js, func_a 要 named export

named 與 default export / import

以上的 export / import 範例是 named export / import (具名輸出/輸入)，還有一種是 default export / import。例如

// 輸出
export default your_var;
// 輸入
import new_name from './your_module.js';

default export 最重要的就是在輸出模組「只能出現一次」。在輸入模組則是任意取名去接。

這樣就是一個最簡單的 export / import 架構了。完整的 export / import 寫法還有很多變形，可以參考 MDN 的 export 語法文件、import 語法文件

CommonJS 的 require

目前大部分網站，都是在 Node.js 開發環境 build 前端。常常會看到一個 JS 關鍵字 require('...')

require 來自於 CommonJS，始於開發者的獨立專案。後來 Node.js 用 CommonJS 實作，也採用了 require，直至今日。但必須說明，require 並非 JavaScript ES6 的原生規格。

require 的參數常常是「不加」檔名，為什麼？例如

require(‘./your_your_module’);

依照 Node.js 官方文件，Node.js 會先找 .js、.json、.node。如果你要輸入的不是這3個副檔名，require 參數就要寫檔名全稱 (包含副檔名)。

require 參數也可以填入 package.json 中列出的套件名稱，這樣 Node.js 就會知道要輸入的檔案路徑 (通常是在 node_modules 資料夾底下)。

建置前端時 require 與 import 的不同

我們以 Laravel 舉例。基本上 Laravel 是用 require，因為 Laravel 前端建置基底是 Node.js，用的是 CommonJS module system。當然，Node.js 稍作調整可以支援 ES6 module system，不在這裡討論。

如果你有 local module (非 Node.js 核心，非 npm 安裝，開發者自己擺在專案的 js 檔案)，require 跟 import 都可以。

這邊要說明一下，不管是 require 或 import，一般情形只是「執行」該 js 檔案。在建置前端時，是將輸入的模組一起 compile 起來。

結語

本篇回顧了一下 JavaScript ES6 的 import / export，也藉這個機會比較了 Node.js 建置前端時用的 require。

本篇重點並「不在」比較 CommonJS 與 ES6 module system，兩者寫法不同，規格也不同。例如，require 輸入的是整個模組，import 可以輸入一個模組中部分的變數、函式、物件、類別。

import / export 與 require 不是新題目，但卻是現代前端技術很重要的模組化功能。很多前端建置工具是基於 Node.js (例如 Laravel)，require 與 import 也大量被使用，很值得再回顧一下。

Laravel 9.19 開始 (2022/6/30)，Laravel 前端檔案管理工具從 Laravel Mix 改為 Vite。

每次寫關於軟體工程演進類的文章，都會有感於時間過得真的太快。2017~2022，五年多就這樣過去了。五年的時間，希望大家在人生中都有累積些什麼。

Laravel Mix 的底層是 Webpack，在 Laravel 根目錄會有 package.json, webpack.mix.js 兩支檔案。執行

npm install

會依照 package.json 去安裝套件到你的開發環境。

package.json 中有一個 “scripts” 欄位，定義了很多 npm 指令，並將 npm 指令轉成 mix 指令。mix 指令就會去跑 webpack.mix.js 這支檔案裡的 script，包含 compile css / js。

Laravel Vite 是基於 Vite，是一個基於原生 JavaScript ESM 的前端開發工具。與 Webpack 機制上不同的是，Webpack 一律依照 script 打包全部檔案素材 (dev mode 也是打包全部)。

而 Vite 在熱更新時 (hot module replacement，HMR)，是先 refresh 瀏覽器，檢查現在前端頁面有關的檔案是否有更新，如果有，才編譯與該頁面有關的檔案 (而不是每次都全部打包)。因此在開發階段，尤其是大型專案，會大幅加速開發時間。

Laravel Vite 一樣有 package.json，一樣要跑 npm install。只是根目錄 script 檔案不是 webpack.mix.js，改為用 vite.config.js。

Laravel Vite 的 package.json 中一樣有 “scripts” 欄位：

npm run dev  // 轉成 “vite”
npm run build  // 轉成 "vite build"

vite 指令就會去跑 vite.config.js 這支檔案裡的 script，預設是

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

入口的 css / js 一樣是 resources/sass/app.scss, resources/js/app.js。注意有一個設定 refresh: true，這代表在執行 npm run dev 時，如果底下這幾個路徑檔案有更新

• app/View/Components/**
• lang/**
• resources/lang/**
• resources/views/**
• routes/**

瀏覽器已 load 的頁面會整頁 refresh。以上是預設的監聽路徑，你也可以將自己想監聽的檔案路徑設定給 refresh 參數 (以設定 array 代替 true)，這樣 Vite 就會監聽你定義的路徑。

跟之前一樣 app.scss 中預設 import 隔壁的 _variables.scss。

app.js 中預設 import 隔壁的 bootstrap.js，在其中 load 你需要的套件，例如：jQuery，Bootstrap，Vue，等。

在前端檔案加一行 (與 Mix 不同，Vite 引用 css / js 在同一行)

@vite(['resources/sass/app.scss', 'resources/js/app.js'])

就可以將 compile 好的 css / js 引入 (並加 preload 屬性)。如果是 Build Mode (npm run build)，css / js 檔名會加上版本號 (auto-versioning)。

目前如果先安裝 laravel/ui，build 出來的 css / js 會包含 Bootstrap 5.2.3，是目前 (2022年12月) Bootstrap 的最新版。

Vite 也可以處理前端素材檔案，例如圖檔跟字型檔。在 JS 的入口處 (app.js) 寫入

import.meta.glob([
  '../images/**',
  '../fonts/**',
]);

執行 npm run build，這樣 Vite 就會將素材檔名編碼過，並移到 public folder 底下。前端要用素材檔可以這樣寫

<img src="{{ Vite::asset('resources/images/logo.png') }}">
{{-- <img src="http://your-url.com/build/assets/logo.1234ooxx.png"> --}}

結論

從 Webpack 到 Vite，底層是完全不同了。但可以看出來 Laravel Vite 創作時，作者盡量不動 Laravel 的架構，與之前一樣的 css / js 入口檔案。

Vite config 當然有一些獨立的功能和寫法。既然 Laravel 決定改用 Vite 了，我們應該也要隨之學習和習慣 Vite 的使用。

https://laravel.com/docs/5.4/frontend
https://laravel.com/docs/5.4/mix
Laravel 5.4 開始使用 Laravel Mix 去處理前端的 js / css 檔案，Laravel Mix 這套件是由 npm 管理的，所以首先確認你的開發環境中有裝 npm.

裝完 Laravel 後你的 Laravel 根目錄會有 package.json, webpack.mix.js, 確認這兩支 file 也在你的開發環境，執行

npm install

或是 (如果你的開發環境是 Windows)

npm install --no-bin-links

npm 就會依照 package.json 去 download 套件到你的開發環境。注意 package.json 中預設就有 Bootstrap, jQuery, Laravel Mix, Vue. 執行

npm run dev

或是 (如果你要壓縮你的 js/css output)

npm run production

npm 就會去執行 webpack.mix.js 中所指定的步驟 (有 gulp 經驗的朋友應該不陌生)。 webpack.mix.js 預設會 compile

• resources/assets/sass/app.scss 到 public/css/app.css
• resources/assets/js/app.js 到 public/js/app.js

注意 resources folder 是外部不可 access 的，public folder 才是公開的。

如果你看一下 resources/assets/sass/app.scss 就會了解，他就是一般 Sass 的架構，預設就有個 _variables.scss 在隔壁，import 到 app.scss

resources/assets/js/app.js 中預設 import 隔壁的 bootstrap.js，在其中 load 了 jQuery, Bootstrap, Vue, 可以在其中作 configuration.

最後有點值得一提，在 webpack.mix.js 最後加上 version()

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .version();

這樣產出的 app.css, app.js 檔案名稱都會被編碼過 (參考 如何利用 gulp 自動添加 JS 及 CSS 版號，避免瀏覽器快取)。使用時

<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
<script src="{{ mix('/js/app.js') }}"></script>

mix function 會自行去找最新產出的 css / js.

一般來說，當使用者開過一個網站，他的瀏覽器會快取網站的 JS 及 CSS (就是記在瀏覽器的意思)。所以當一個使用者瀏覽了你的網站，過沒幾天你更新了 JS 或 CSS，但因為該使用者的瀏覽器記住了上次瀏覽的 JS / CSS，以至於你更新的 JS / CSS 不會在他的瀏覽器上生效。

同理，其他最近瀏覽你網站的使用者(已快取)，如果再打開你的網站，也看不到你剛剛更新的 JS / CSS。

每次更新時自動添加 JS 及 CSS 版號 (auto-versioning) 是一個避免瀏覽器快取的方法。前端工具 gulp 有一套完整的解法，本篇文章會依照 gulp-rev-replace 的做法一步一步來看。首先它使用 gulp-useref 分別合併 JS 及 CSS. 

<!-- build:css css/combined.css -->
your css <link>...
<!-- endbuild -->

<!-- build:js scripts/combined.js -->
your js <script>...
<!-- endbuild -->

照上述 html 轉完後會變成

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

<script src="scripts/combined.js"></script> 

要注意的是 combined.css, combined.js 目前都還未壓縮，要使用 gulp-uglify 壓縮 JS 檔，使用 gulp-csso 壓縮 CSS 檔，接著使用 gulp-rev 去改目前 file stream 上的檔案名稱。

例如 combined.js 會改成 combined-12345abcde.js 放在你的 destination folder，combined.css 也會被更名，這個步驟就是所謂的「上版號」。

最後再用 gulp-rev-replace 將 source html 中的 <link>, <script> 改成指向加上版號的 JS 及 CSS，例如

<link rel="stylesheet" href="css/combined-12345abcde.css"/>

<script src="scripts/combined-12345abcde.js"></script> 

以上就是 gulp-rev-replace 文件裡介紹的自動上版號 (auto-versioning) 的流程。