1

背景：

我有一个Webpack 设置，我使用 PurgeCSS 预处理 SCSS，并使用带有esbuild-loader的实时 HMR 服务器来加速 Webpack 中的编译，但即便如此我的编译时间仍然很慢，我想要 ESBuild 的原始速度并删除 Webpack完全设置。

ESBuild 的基本设置很简单，您可以使用 npm 安装 esbuild 并在package.json中添加以下代码：

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

并使用以下命令运行它：

npm run watch

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

问题：

  1. 如何使用外部配置文件配置 ESBuild？
  2. ESBuild 不支持开箱即用的 SCSS。如何配置像esbuild-sass-plugin这样的外部插件，更进一步，如何设置PostCSS及其像Autoprefixer这样的插件？
  3. 如何使用自动重建设置开发服务器？
  4. 如何设置 PurgeCSS？
4

1 回答 1

5

解决方案：

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

  1. 在根目录下新建一个文件：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));
  1. 在您的package.json中添加以下代码：
{
    ...
    "scripts": {
        ...
        "build": "node esbuild.js"
    },
...
}
  1. 使用npm run build命令运行构建，这将捆绑您的样式表和脚本并将它们输出到dist目录中。
  2. 有关更多详细信息和/或添加自定义构建选项，请参阅ESBuild 的构建 API 文档。

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

  1. 安装 npm 依赖项：npm i -D esbuild-sass-plugin postcss autoprefixer
  2. 将您的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! ⚡"));

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

  1. ESBuild 在这方面有一个限制，你可以传入watch: true或者运行它的 server。它不允许两者。
  2. ESBuild 还有另一个限制，它不像 Webpack 那样支持 HMR。
  3. 因此，要忍受这两种限制并仍然允许服务器，我们可以使用Live Server。使用npm i -D @compodoc/live-server.
  4. 在根目录下新建一个文件：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));
  1. 编辑package.json中的脚本：
{
    ...
    "scripts": {
        ...
        "build": "node esbuild.js",
        "watch": "node esbuild_watch.js"
    },
...
}
  1. 要运行构建，请使用此命令npm run build。
  2. 使用自动重建运行开发服务器npm run watch。这是一种“hacky”的做事方式，但做得相当不错。

4. 如何设置 PurgeCSS？

我为此找到了一个很棒的插件：esbuild-plugin-purgecss by peteryuan但它不允许为需要解析的 html/views 路径传递选项，因此我创建了esbuild-plugin-purgecss-2来执行工作。要设置它，请阅读以下内容：

  1. 安装依赖项npm i -D esbuild-plugin-purgecss-2 glob-all。
  2. 将以下代码添加到您的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'
                ]),
            }),
        ],
    })
    ...
  1. 现在运行npm run buildornpm run watch将从glob.sync([...]上面代码中提到的文件路径中清除CSS。

TL;博士：

  1. 在根esbuild.js中创建一个外部配置文件，并在其中的package.json中添加运行它的命令，scripts: {..}例如"build": "node esbuild.js"使用npm run build.
  2. ESBuild 不支持 HMR。此外，您可以使用 ESBuildwatch或serve使用 ESBuild，而不是两者。要克服这一问题，请使用单独的开发服务器库，例如Live Server。
  3. 有关完整设置，请参阅我在 github 上的 custom-esbuild-with-scss-purgecss-and-liveserver存储库。

最后说明：

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

谢谢。

于 2021-12-12T17:08:31.143 回答