解决方案:
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