nanarinote

Appearance

构建工具 ​

构建工具指的是 js 的模块打包器(module bundler)

一般常见的有

  • webpack
  • rollup
  • tsup
  • vite
  • ...

它们有的用来开发 lib 包有的则是开发和打包 js 应用（如打包 PWA，Electron 等）。

它们一般功能很灵活但配置较为复杂。这里以其中几个为例

webpack ​

webpack 提供的功能主要是单页应用的开发服务器以及打包压缩代码

webpack5 与 5 以下版本相比减少了很多包袱。以版本 4 为例子。

在初始化后，还需安装开发服务器的依赖

bash
pnpm i webpack webpack-cli webpack-dev-server -D

下面两个命令分别启动开发服务器和打包

  • pnpm webpack-dev-server
  • pnpm webpack

在配置文件中配置 output 可以以文件名 hash 来规避浏览器缓存

javascript
output: {
    filename: "[hash:8]-bundle.js",
    path: join(__dirname, "dist")
},

下载对应的 loader 配置非 js 的引入以及热重载

javascript
rules: [{
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
    }, {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"],
    }, {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ["file-loader"],
    },
    //热重载html
    {
        test: /\.(htm|html)$/,
        use: ["raw-loader"],
    },
]

届时可以在 js 中引入非 js

javascript
import "./index.html"
import "./style.css"

//Other javascript code

less 转 css ，typescript 转 js，图片转 webp 等功能的 loader 用法类似。webpack 会自己进行依赖分析并编译为浏览器所需的格式。

Vite ​

Vite是依靠浏览器对 ES module 支持的开发/生产服务器和打包器，它对 vue 优先支持。

vite 免配置 less sass scss stylus 以及 typescript，只需要安装依赖的预处理器即可

创建项目

bash
pnpm init vite@latest

在 GitHub 等社区可以找到 vite 常用的项目模板。

下文本来是介绍 snowpack 的。但是 snowpack 在 2022 年 12 月停止维护了。snowpack 官网建议新项目使用 vite。