r938spa

Lightweight SPA build tool for the web-spa project.

Install

ติดตั้งใน project:

npm i r938spa

เมื่อติดตั้งแล้วจะได้ CLI:

r938spa

Usage

คำสั่งพื้นฐาน:

r938spa --input ./frontend --output ./dist --clean --rootpath /dist

หรือใช้แบบสั้นผ่าน npm script:

{
  "scripts": {
    "build": "r938spa --input ./frontend --output ./dist --clean --rootpath /dist"
  }
}

แล้ว:

npm run build

Options

| Option | Description | | ------------------- | --------------------------------------- | | --input <dir> | source directory | | --output <dir> | output directory | | --rootpath <path> | public URL root | | --clean | ลบ output ก่อน build | | --watch | rebuild เมื่อ source เปลี่ยน | | --minify | minify JS, CSS และ HTML | | --minify-js | minify JavaScript | | --minify-css | minify CSS | | --minify-html | minify HTML | | --sourcemap | สร้าง external source map | | --target <target> | JavaScript target; default คือ es2022 | | --help | แสดง help |

ตัวอย่าง:

r938spa --input ./frontend --output ./dist --rootpath /dist
r938spa --input ./frontend --output ./dist --clean --rootpath /dist
r938spa --input ./frontend --output ./dist --watch --rootpath /dist
r938spa --input ./frontend --output ./dist --minify --rootpath /dist
r938spa --input ./frontend --output ./dist --minify-js --sourcemap --rootpath /dist

Build behavior

JavaScript

ไฟล์ .js จะถูก transform เป็น ESM โดยใช้ esbuild

• target default: es2022
• optional minification
• optional external sourcemap
• local relative imports ถูก rewrite เป็น public path
• dynamic import() รองรับ
• load('./page.js') path ถูก rewrite

CSS

ไฟล์ .css จะถูก transform ด้วย esbuild

ถ้าชื่อไฟล์ขึ้นต้นด้วย:

[app]header.css
[app]button.css
[home]hero.css

จะรวมเป็น:

dist/css/app.css
dist/css/home.css

CSS import จาก JavaScript:

import "./button.css";

จะถูกเปลี่ยนเป็น runtime CSS loading ผ่าน .r938-spa/css-loader.js

HTML

HTML รองรับ:

• local src
• local href
• optional minification
• path rewrite ตาม --rootpath

Assets

ไฟล์ที่ไม่ใช่ .js, .css หรือ .html จะถูก copy ตาม relative path

README.md จะไม่ถูก copy เข้า output

Runtime helpers

แพ็กเกจมี runtime helpers อยู่ใน:

r938spa/
├── css-loader.js
├── element.js
├── router.js
├── title.js
└── README.md

เมื่อ build จะถูก copy เป็น:

dist/.r938-spa/
├── css-loader.js
├── element.js
├── router.js
└── title.js

Build plugin imports

สามารถ import helper ด้วยชื่อ package-style:

import element from "element";
import router from "router";
import { set } from "title";

Builder จะ rewrite ไปยัง:

/dist/.r938-spa/element.js
/dist/.r938-spa/router.js
/dist/.r938-spa/title.js

CSS loader

css-loader.js โหลด stylesheet แบบ runtime และป้องกันการเพิ่ม stylesheet URL เดิมซ้ำ

Element

element.js เพิ่ม DOM helper methods ให้ Element.prototype เช่น:

import element from "element";

element();

document.body.div("card").h3("Hello").p("World");

Router

router.js รองรับ:

• static routes
• :param
• wildcard
• query string
• callback chain
• next()
• dynamic load()
• History API
• SPA link interception

ตัวอย่าง:

import { create, start } from "router";

create("/about", ({ load }) => load("./pages/about.js"));

const router = start();

Title

title.js จัดการ document.title:

import { setName, set } from "title";

setName("Checklist");
set("Dashboard");

ผลลัพธ์:

Dashboard | Checklist

Recommended project

my-app/
├── frontend/
│   ├── pages/
│   ├── cmp/
│   ├── css/
│   └── index.html
├── package.json
└── node_modules/

ติดตั้ง:

npm i r938spa

Build:

r938spa --input ./frontend --output ./dist --clean --rootpath /dist

Development

Repository source structure:

project-r938spa/
├── r938spa.js
├── r938spa/
│   ├── css-loader.js
│   ├── element.js
│   ├── router.js
│   ├── title.js
│   └── README.md
├── package.json
└── README.md

ทดสอบ CLI จาก source:

node r938spa.js --help

ทดสอบ package contents:

npm run pack:test

License

MIT