unplugin-macros 使用教程

unplugin-macros 使用教程

unplugin-macrosMacros plugin for bundlers.项目地址:https://gitcode.com/gh_mirrors/un/unplugin-macros

项目介绍

unplugin-macros 是一个用于打包工具的宏插件，允许在构建时运行 JavaScript 函数，并将返回值直接内联到你的包中。这个插件支持多种打包工具，包括 Vite、Rollup、esbuild 和 Webpack。通过使用宏，你可以在构建时生成常量代码，甚至额外的资源，而无需任何自定义插件。

项目快速启动

安装

首先，你需要通过 npm 安装 unplugin-macros：

npm i -D @unplugin/macros

配置

根据你使用的打包工具，进行相应的配置：

Vite

在你的 vite.config.ts 文件中添加以下配置：

import Macros from 'unplugin-macros/vite';

export default defineConfig({
  plugins: [Macros()]
});

Rollup

在你的 rollup.config.js 文件中添加以下配置：

import Macros from 'unplugin-macros/rollup';

export default {
  plugins: [Macros()]
};

esbuild

确保你的 esbuild 版本 >= 0.15，然后在你的 esbuild.config.js 文件中添加以下配置：

import { build } from 'esbuild';
import Macros from 'unplugin-macros/esbuild';

build({
  plugins: [Macros()]
});

Webpack

在你的 webpack.config.js 文件中添加以下配置：

const Macros = require('unplugin-macros/webpack');

module.exports = {
  plugins: [Macros()]
};

使用

在你的 JavaScript 或 TypeScript 文件中，你可以导入任何模块作为宏：

import { getRandom, buildTime } from './macros';

with ({ type: 'macro' }) {
  getRandom(); // 将在构建时被替换为一个随机数
  buildTime; // 将在构建时被替换为时间戳
}

应用案例和最佳实践

生成优化后的正则表达式

你可以使用 regexgen 库在构建时生成优化的正则表达式：

import regexgen from 'regexgen';

with ({ type: 'macro' }) {
  const regex = regexgen(['foobar', 'foobaz', 'foozap', 'fooza']);
  console.log(regex);
}

这将编译为以下内容：

console.log(/foo(?:zap|ba[rz])/);

生成常量代码

你可以使用宏在构建时生成常量代码，例如：

import { generateConstants } from './macros';

with ({ type: 'macro' }) {
  const constants = generateConstants();
  console.log(constants);
}

典型生态项目

unplugin-macros 可以与多种打包工具和生态项目结合使用，包括但不限于：

• Vite: 一个快速的前端构建工具。
• Rollup: 一个高效的 JavaScript 模块打包器。
• esbuild: 一个极快的 JavaScript 打包器。
• Webpack: 一个广泛使用的模块打包器。

通过结合这些工具，你可以更高效地进行前端开发和构建。

unplugin-macrosMacros plugin for bundlers.项目地址:https://gitcode.com/gh_mirrors/un/unplugin-macros