javascript - 如何使用 SCSS、PurgeCSS 和 LiveServer 设置自定义 ESBuild？

Question

背景:
我有一个 Webpack setup我使用带有 esbuild-loader 的实时 HMR 服务器使用 PurgeCSS 预处理 SCSS用于加快 Webpack 中的编译，但即便如此我的编译时间仍然很慢，我希望 ESBuild 的原始速度并完全删除 Webpack 设置。
ESBuild 的基本设置很简单，使用 npm 安装 esbuild 并在 中添加以下代码包.json :

{
  ...
  "scripts": {
    ...
    "watch": "esbuild --bundle src/script.js --outfile=dist/script.js --watch"
  },
  ...
}

并使用以下命令运行它:

npm run watch

这种单行配置将捆绑您的脚本和样式(您可以在 script.js 中导入 style.css)并在 dist 目录中输出文件，但这不允许 ESBuild 的高级配置，例如为您的样式表输出不同的名称和脚本文件或使用插件。
问题:

如何使用外部配置文件配置 ESBuild？

ESBuild 不支持开箱即用的 SCSS。如何配置外部插件，如 esbuild-sass-plugin更进一步，如何设置 PostCSS及其插件如 Autoprefixer ?

如何使用自动重 build 置开发服务器？

如何设置 PurgeCSS？

Answer 1

解决方案:
1. 如何使用外部配置文件配置 ESBuild？

在根目录下新建文件: esbuild.js 内容如下:

import esbuild from "esbuild";

esbuild
    .build({
        entryPoints: ["src/styles/style.css", "src/scripts/script.js"],
        outdir: "dist",
        bundle: true,
        plugins: [],
    })
    .then(() => console.log("⚡ Build complete! ⚡"))
    .catch(() => process.exit(1));

在您的 中添加以下代码包.json :

{
    ...
    "scripts": {
        ...
        "build": "node esbuild.js"
    },
...
}

使用 运行构建npm 运行构建 命令，这将捆绑您的样式表和脚本并将它们输出到 距离 目录。

有关更多详细信息和/或添加自定义构建选项，请参阅 ESBuild's Build API documentation .

2. ESBuild 不支持开箱即用的 SCSS。如何配置像 esbuild-sass-plugin 这样的外部插件，更进一步，如何设置 PostCSS 和像 Autoprefixer 这样的插件？

安装 npm 依赖:npm i -D esbuild-sass-plugin postcss autoprefixer

编辑您的 esbuild.js 到以下代码:

import esbuild from "esbuild";
import { sassPlugin } from "esbuild-sass-plugin";
import postcss from 'postcss';
import autoprefixer from 'autoprefixer';

// Generate CSS/JS Builds
esbuild
    .build({
        entryPoints: ["src/styles/style.scss", "src/scripts/script.js"],
        outdir: "dist",
        bundle: true,
        metafile: true,
        plugins: [
            sassPlugin({
                async transform(source) {
                    const { css } = await postcss([autoprefixer]).process(source);
                    return css;
                },
            }),
        ],
    })
    .then(() => console.log("⚡ Build complete! ⚡"))
    .catch(() => process.exit(1));

3. 如何设置自动重建的开发服务器？

ESBuild对此有限制，可以传入watch: true或 run its server . It doesn't allow both .

ESBuild 还有另一个限制，it doesn't have HMR support就像 Webpack 一样。

因此，要忍受这两个限制并仍然允许服务器，我们可以使用 Live Server .使用 npm i -D @compodoc/live-server 安装它.

在根目录下新建文件: esbuild_watch.js 内容如下:

import liveServer from '@compodoc/live-server';
import esbuild from 'esbuild';
import { sassPlugin } from 'esbuild-sass-plugin';
import postcss from 'postcss';
import autoprefixer from 'autoprefixer';

// Turn on LiveServer on http://localhost:7000
liveServer.start({
    port: 7000,
    host: 'localhost',
    root: '',
    open: true,
    ignore: 'node_modules',
    wait: 0,
});

// Generate CSS/JS Builds
esbuild
    .build({
        logLevel: 'debug',
        metafile: true,
        entryPoints: ['src/styles/style.scss', 'src/scripts/script.js'],
        outdir: 'dist',
        bundle: true,
        watch: true,
        plugins: [
            sassPlugin({
                async transform(source) {
                    const { css } = await postcss([autoprefixer]).process(
                        source
                    );
                    return css;
                },
            }),
        ],
    })
    .then(() => console.log('⚡ Styles & Scripts Compiled! ⚡ '))
    .catch(() => process.exit(1));

编辑脚本 在您的包.json :

{
    ...
    "scripts": {
        ...
        "build": "node esbuild.js",
        "watch": "node esbuild_watch.js"
    },
...
}

要运行构建，请使用此命令 npm run build .

要使用自动重建运行开发服务器，请运行 npm run watch .这是一种“hacky”的做事方式，但做得相当不错。

4. 如何设置 PurgeCSS？
我为此找到了一个很棒的插件: esbuild-plugin-purgecss由 peteryuan但它不允许为需要解析的 html/views 路径传递选项，所以我
已创建 esbuild-plugin-purgecss-2就可以了。要设置它，请阅读以下内容:

安装依赖 npm i -D esbuild-plugin-purgecss-2 glob-all .

将以下代码添加到您的 esbuild.js 和 esbuild_watch.js 文件:

// Import Dependencies
import glob from 'glob-all';
import purgecssPlugin2 from 'esbuild-plugin-purgecss-2';

esbuild
    .build({
        plugins: [
            ...
            purgecssPlugin2({
                content: glob.sync([
                    // Customize the following URLs to match your setup
                    './*.html',
                    './views/**/*.html'
                ]),
            }),
        ],
    })
    ...

现在运行 npm run build或 npm run watch将从 glob.sync([...] 中提到的文件路径中清除 CSS在上面的代码中。

TL;博士:

在根目录下创建一个外部配置文件 esbuild.js 并添加命令以在 中运行它包.json 里面 scripts: {..}例如"build": "node esbuild.js"使用 npm run build 引用和运行配置文件.

ESBuild 不支持 HMR。此外，您可以 watch或 serve使用 ESBuild，而不是两者。要克服，请使用单独的开发服务器库，如 Live Server .

完整设置请引用我的custom-esbuild-with-scss-purgecss-and-liveserver github上的存储库。

最后说明:
我知道这是一个很长的话题，但我花了很多时间才弄清楚这些。我的目的是让其他人研究同样的问题并试图找出从哪里开始。
谢谢。