在Esbuild中使用Stylify CSS

Esbuild是一个JavaScript的模块捆绑器，它可以将小段的代码编译成更大更复杂的东西，比如一个库或应用程序。 Esbuild捆绑器项目的主要目标是带来一个构建工具性能的新时代，并在此过程中创造一个易于使用的现代捆绑器。

如何将Stylify CSS集成到Esbuild中

安装

首先，使用NPM或Yarn安装@stylify/unplugin软件包：

npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin

使用方法

接下来，添加创建一个配置文件esbuild.config.js：

const esbuild = require('esbuild');
const { stylifyEsbuild } = require('@stylify/unplugin');

esbuild.build({
	entryPoints: ['./index.js'],
	bundle: true,
	outfile: './output.js',
	plugins: [
		stylifyEsbuild({
			bundles: [{ files: ['./index.html'], outputFile: './index.css' }],
			// 可选
			// 编译器配置信息 https://stylifycss.com/en/docs/stylify/compiler#configuration
			compiler: {
				// https://stylifycss.com/en/docs/stylify/compiler#variables
				variables: {},
				// https://stylifycss.com/en/docs/stylify/compiler#macros
				macros: {},
				// https://stylifycss.com/en/docs/stylify/compiler#components
				components: {},
				// ...
			}
		})
	]
});

现在你可以运行node esbuild.config.js命令。这将生成output.js和index.css，如果配置好的话，文件中的选择器也会被修改。