解决方案：
1. 如何使用外部配置文件来配置 ESBuild？
- 在根目录下创建一个名为esbuild.mjs的新文件，并将以下内容添加到其中：
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));
请在您的
package.json 中添加以下代码：
{
...
"scripts": {
...
"build": "node esbuild.mjs"
},
...
}
- 使用npm run build命令运行构建，这将打包您的样式表和脚本，并将它们输出到dist目录中。
- 如需了解更多详细信息和/或添加自定义构建选项，请参阅ESBuild的构建API文档。
2. ESBuild不支持SCSS。如何配置外部插件，例如esbuild-sass-plugin，以及如何设置PostCSS和Autoprefixer等插件？
- 安装npm依赖项：
npm i -D esbuild-sass-plugin postcss autoprefixer
- 将您的esbuild.mjs编辑为以下代码：
import esbuild from "esbuild";
import { sassPlugin } from "esbuild-sass-plugin";
import postcss from 'postcss';
import autoprefixer from 'autoprefixer';
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 或 运行其服务器。它不允许同时使用两者。
- ESBuild 还有另一个限制，它不像 Webpack 一样支持 HMR。
- 因此，为了应对这两个限制并仍然允许服务器，我们可以使用 Live Server。使用
npm i -D @compodoc/live-server 安装它。
- 在根目录下创建一个名为：esbuild_watch.mjs 的新文件，并添加以下内容：
import liveServer from '@compodoc/live-server';
import esbuild from 'esbuild';
import { sassPlugin } from 'esbuild-sass-plugin';
import postcss from 'postcss';
import autoprefixer from 'autoprefixer';
liveServer.start({
port: 7000,
host: 'localhost',
root: '',
open: true,
ignore: 'node_modules',
wait: 0,
});
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));
- 编辑你的 package.json 中的脚本：
{
...
"scripts": {
...
"build": "node esbuild.mjs",
"watch": "node esbuild_watch.mjs"
},
...
}
- 运行构建请使用以下命令
npm run build。
- 要运行自动重建的dev服务器，请运行
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.mjs 和 esbuild_watch.mjs 文件中：
import glob from 'glob-all';
import purgecssPlugin2 from 'esbuild-plugin-purgecss-2';
esbuild
.build({
plugins: [
...
purgecssPlugin2({
content: glob.sync([
'./*.html',
'./views/**/*.html'
]),
}),
],
})
...
- 现在运行
npm run build或npm run watch将从上面代码中提到的glob.sync([...]中的文件路径中清除purgeCSS。
TL;DR:
- 在根目录下创建一个外部配置文件esbuild.mjs，并在
scripts: {..}中的package.json中添加运行它的命令，例如"build": "node esbuild.mjs"，通过使用npm run build引用和运行配置文件。
- ESBuild不支持HMR。此外，您只能使用ESBuild中的
watch或serve，而不能同时使用两者。为了克服这个问题，可以使用类似Live Server的单独开发服务器库。
- 有关完整设置，请参阅我在github上的custom-esbuild-with-scss-purgecss-and-liveserver存储库。
最后的注释：
我知道这是一个很长的帖子，但我花了很多时间才弄清楚这些问题。我的意图是为那些遇到相同问题并试图找出如何入门的人提供帮助。
谢谢。
node esbuild.mjs而不是node esbuild.js才能使其正常工作。 - xcvbn