Day 21：Rspack / Rsbuild 入門 (1) - 基礎設定與了解什麼是 Lightning CSS？ - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2024 iThome 鐵人賽

DAY 21

Modern Web

Rust 的戰國時代：探索網頁前端工具的前世今生系列第 21 篇

Day 21：Rspack / Rsbuild 入門 (1) - 基礎設定與了解什麼是 Lightning CSS？

16th鐵人賽 rspack rsbuild

codefarmer

2024-10-05 00:29:22

152 瀏覽

分享至

前言

昨天實驗失敗，今天決定從零啟一個新專案來實際入門一下 Rspack 這個工具，順便玩一玩它的生態系。

啟個新專案

參考文件環境建議使用 Node.js 高於 v16 的 LTS 版本，我自己用的是 v20.17.0。這裡可以選擇要只用 bundler 部份的 Rspack，或是連上層 dev server 都有的 Rsbuild。

想知道工具關係可以參考文件說明及這張圖：

tool

這裡我選擇 Rsbuild 來測試，可直接用 CLI 工具快速建一個新專案：

$ pnpm create rsbuild@latest

◆  Create Rsbuild Project
│
◇  Project name or path
│  hello-rsbuild
│
◇  Select framework
│  React
│
◇  Select language
│  TypeScript
│
◇  Select additional tools (Use <space> to select, <enter> to continue)
│  Add Biome for code linting and formatting, Add ESLint for code linting, Add Prettier for code formatting
│
◇  Next steps ──────╮
│                   │
│  cd hello-rsbuild │
│  pnpm i           │
│  pnpm run dev     │
│                   │
├───────────────────╯
│
└  Done.

💡 或懶得從頭建立環境也可以考慮用 rspack-examples 這個 codebase 來找到適合的模板，以下為學習用途試著純手工一個一個加上去藉此熟悉一下基礎建設怎麼做。

建立好專案後用 VS Code 開啟專案，並做一些初始化後嘗試 run 起來：

$ pnpm i
$ pnpm run dev

成功的話會自動開啟網頁看到像下面的圖：

demo-1

導入各種基礎建設

其實官方文件算是蠻好懂的，這裡簡單用幾個基礎建設體驗一下：

CSS 相關語法
- CSS Modules
- CSS 預處理器
- 什麼是 Lightning CSS?
使用 TypeScript 的 plugin 做型別檢查

CSS 相關語法

從文件上看起來 Rspack 底層預設支援最新版的 Lightning CSS 來提昇打包效率，但也提供彈性兼容過往的 PostCSS、各種 Webpack plugin 等。

CSS Modules

開箱即用的預設支援，不需要加設定，預設會自動識別 [name].module.css 與各種 CSS 預處理器副檔名如 [name].module.scss 為 CSS Modules。

CSS 預處理器

這裡用 Sass，其他版本可以參考文件：

$ pnpm add @rsbuild/plugin-sass -D

調整設定檔案 rsbuild.config.ts 加上 Sass 的 plugin 讓 bundler 可以識別：

// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginSass } from '@rsbuild/plugin-sass';

export default defineConfig({
  plugins: [pluginReact(), pluginSass()],
});

實際測試一下，把原本 src 底下的 App.css 改成 App.module.scss，並調整 .content 內容為巢狀：

// src/App.module.scss
body {
  margin: 0;
  color: yellow;
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  background-image: linear-gradient(to bottom, #020917, #101725);
}

.content {
  display: flex;
  min-height: 100vh;
  line-height: 1.1;
  text-align: center;
  flex-direction: column;
  justify-content: center;

  h1 {
    font-size: 3.6rem;
    font-weight: 700;
  }

  p {
    font-size: 1.2rem;
    font-weight: 400;
    opacity: 0.5;
  }
}

原本的 src/App.tsx 也調整一下：

// src/App.tsx
import STYLES from './App.module.scss';

const App = () => {
  return (
    <div className={STYLES.content}>
      <h1>Rsbuild with React</h1>
      <p>Start building amazing things with Rsbuild.</p>
    </div>
  );
};

存檔後可以看到畫面字體有變成黃色，且可以看到有帶上 CSS Module 的 hash：

demo-2

💡 補充：什麼是 Lightning CSS？

文件也有提到 Rspack 底層預設會用 Lightning CSS 的 loader 來轉譯與打包現代 CSS 程式，其實之前在看 Vite 時也一直看到有在實驗性支援 Lightning CSS，趁這個機會了解一下。

Lightning CSS

簡單說的話 Lightning CSS 是一套用 Rust 編寫的 CSS 綜合工具，可以拿來做 CSS 的解析 (parser)、轉譯 (transformer)、壓縮 (minifier)、打包 (bundler)。

在解析與轉譯的方面，它會去讀取專案中的 browserslist 幫忙把專案中比較現代的 CSS 語法，在打包時轉譯成想要支持的瀏覽器可以看懂的語法，並自動補上各款瀏覽器需要的前綴像是 -webkit-、-moz- 等，就像以前 PostCSS 的 autoprefixer 在做的事。如此可以讓你在開發時放心使用各種現代的 CSS 語法。

parcel

在做為壓縮與最小化方面，可以看到這個效能比較表，最右邊的 @parcel/css - 1.0.1 是 Lightning CSS，可以看到勝過 CSSNano 與 esbuild。話說也是看到這張表才發現原來 Lightning CSS 的核心團隊跟 Parcel 是同一組人。

另外回到正題，如果在使用 Rspack 時發現 Lightning CSS 太新在舊專案沒辦法兼容，也可以參考文件這段方式關掉：

// rsbuild.config.ts
import { pluginCssMinimizer } from '@rsbuild/plugin-css-minimizer';

export default {
  plugins: [pluginCssMinimizer()],
  tools: {
    lightningcssLoader: false,
  },
};

使用 TypeScript 做型別檢查

剛剛啟專案時有選要啟用 TypeScript，所以相關設定都做好了。但比較需要另外設定的，文件上有提到啟 server 時 Rspack 底層的 SWC 並沒有幫忙做型別檢查，關於這點來實驗下。

新增一個型別檔案在 src 底下：

// src/types.ts
interface Author {
  name: string;
  email: string;
  url: string;
}

export type { Author };

調整 App.tsx：

// src/App.tsx
import STYLES from './App.module.scss';
import type { Author } from './types';

const App = () => {
  const author: Author = {
    name: 'codefarmer',
    email: 'codefarmer.tw@gmail.com',
    // url: 'https://codefarmer.tw',
  };

  return (
    <div className={STYLES.content}>
      <h1>Rsbuild with React</h1>
      <p>Start building amazing things with Rsbuild.</p>
      <p>Author: {author.name}</p>
    </div>
  );
};

當上面試著把 url 這個屬性註解掉時，會看到 IDE 會提示有型別錯誤：

error

但此時 terminal 上是沒有任何報錯的，所以為了安全起見要用 @rsbuild/plugin-type-check 加一下設定：

$ pnpm add @rsbuild/plugin-type-check -D

一樣調整 rsbuild.config.ts 設定檔，跟上面的 Sass 一樣也是加入 plugin：

// rsbuild.config.ts
import { pluginTypeCheck } from '@rsbuild/plugin-type-check';

export default defineConfig({
  plugins: [pluginReact(), pluginSass(), pluginTypeCheck()],
});

加上後能正確看到型別檢查的報錯就成功了：

start   Compiling...
ready   Compiled in 2.52 s (web)
Type Error in ./src/App.tsx:5:9
TS2741: Property 'url' is missing in type '{ name: string; email: string; }' but required in type 'Author'.
    3 |
    4 | const App = () => {
  > 5 |   const author: Author = {
      |         ^^^^^^
    6 |     name: 'codefarmer',
    7 |     email: 'codefarmer.tw@gmail.com',
    8 |     // url: 'https://codefarmer.tw',