Macros are a mechanism for running JavaScript functions at bundle-time. The value returned from these functions or variables are directly inlined into your bundle.
# npm
npm i -D unplugin-macros
# jsr
npx jsr add -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
Requires esbuild >= 0.15
// esbuild.config.js
import { build } from 'esbuild'
build({
plugins: [require('unplugin-macros/esbuild')()],
})
Webpack
// webpack.config.js
module.exports = {
/* ... */
plugins: [require('unplugin-macros/webpack')()],
}
// main.js
import { buildTime, getRandom } from './macros' with { type: 'macro' }
getRandom() // Will be replaced with a random number at build time
buildTime // Will be replaced with the timestamp at the build time
// macros.js
export function getRandom() {
return Math.random()
}
export const buildTime = Date.now()
See more in Bun Macros.
Import Attributes syntax is supported in TypeScript 5.3 and above.
However, you can use assert
keyword instead of with
, which is supported in TypeScript 4.5 and above.
Import Attributes syntax is supported in ESLint v9.14.0.
Refer to docs.
Thanks to Bun Macros.