刚好够用的简易前端工具集


前端构建工具总给人一种很 magic 很复杂的感觉,理解它需要花一番工夫,不理解直接用的话,总觉得心里不踏实,出问题或者加需求不一定能搞定。我习惯用 React,官方推荐用 Create React App 来创建项目,但它给我的感觉太黑盒了,而且新建一个项目就会添加 1000 多个 package,也不知道这 1000 多个 package 是干啥用的。

$ npx create-react-app demo

Creating a new React app in ...

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

added 1354 packages in 18s

如果用 webpack 的话,挑战也很大,首先要捋清它的工作模式就要费一番工夫,文档都啃下来也不简单,同时它又很灵活,提供了几十个 Hook,每个 Hook 都对应不同的时机,有自己的参数,文档上也没有详细说明这些 Hook 具体的时机和适合的使用场景。插件很丰富,但挑起来也很累,配置项很多,大约有 10086 个(当然,此处用了夸张手法),有些 Plugin 如 html-webpack-plugin 还有自己的 Plugin。对于前端新人真的很劝退。

如果是自己的前端项目,能实现以下几点就可以了:

  1. js 这块能通过 npm install 安装依赖,打出一个 js 包(最好支持 tree-shaking)
  2. css 这块能支持类似 tailwind 的使用姿势
  3. 维护方便,部署方便

对于第 1 点,可以使用 esbuild,这是一个用 go 写的 js bundler(可以把相关的 js 文件合并成一个浏览器可以识别和运行的 js 文件),足够快,功能也够用,虽然还未到 1.0,但已被一些知名项目使用(如 vite / snowpack)。

对于第 2 点,可以使用 windicss,相比 tailwind 更轻量,性能也更好。

对于第 3 点,我预期的目录结构是这样的:

|- dist/
|- assets/
|- styles/
|- layouts/
  |- index.html
|- scripts/
  |- index.jsx
  |- components/
    |- App.jsx
|- package.json
  • dist 是待发布的目录,运行 npm build 命令后所有的文件都会在这个目录下。
  • assets 用来放资源文件(如图片)
  • styles css 文件
  • layouts html 文件
  • scripts react 等 js 文件

每个目录的职能都很清晰,也没有各种 config 文件,维护起来比较方便(为什么是按 function 来分,而不是 feature,可以看下这篇文章),部署也很简单。

index.html 是入口页,这里会引用最终的 css 和 js 文件

<head>
  <link rel="stylesheet" href="/assets/index.css" />
  <link rel="icon" href="https://fav.farm/👻" />
</head>

<body>
  <div id="root"></div>
  <script src="/assets/index.js"></script>
</body>

index.jsx 是 js 的入口文件

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './components/App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(App());

package.json 的核心内容大概是这样的:

{
  "scripts": {
    "dev-js": "cp -r layouts/* dist && cp -r assets dist && esbuild scripts/index.jsx --servedir=dist --outdir=dist/assets --bundle",
    "dev-css": "windicss './layouts/**/*.html' './scripts/**/*.{js,jsx}' -o dist/assets/index.css --dev",
    "dev": "concurrently -g 'npm:dev-*'",
    "build-js": "cp -r layouts/* dist && cp -r assets dist && esbuild scripts/index.jsx --bundle --minify --outfile=dist/assets/index.js",
    "build-css": "windicss './layouts/**/*.html' './scripts/**/*.{js,jsx}' -o dist/assets/index.css --minify",
    "build": "concurrently -g 'npm:build-*'"
  },
  "dependencies": {
    "esbuild": "^0.14.32",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "windicss": "^3.5.1"
  },
  "devDependencies": {
    "concurrently": "^7.1.0"
  }
}

简单说明下 scripts 栏下的几个命令:

  • dev-js: 把相关内容复制到 dist 目录下,然后让 esbuild 来 serve 这个目录,当 js 文件有变化时,再次请求页面,就会得到最新的 js 文件。
  • dev-css: windicss 监控特定目录下的文件,有变化时会自动生成新的 css 文件。
  • dev: 通过 concurrently 一并执行 dev-jsdev-css
  • build-js: 通过 esbuild 命令把 js 文件打包成一个(minify 之后)。
  • build-css: 通过 windicss 命令扫描项目中的关键字,并生成 minify 后的 css 文件。
  • build: 通过 concurrently 一并执行 build-jsbuild-css

之后如果想要新增依赖,用 npm installpnpm add 就行了,相比 create-react-app 或者 webpack,能力上肯定会弱一些,但也更容易理解。

这就是我目前的「刚好够用的简易前端工具集」的尝试,用来写简单的页面应该够用了,如果你有别的想法,也欢迎交流~