+
+
+Unified plugin system, Support Vite, Rollup, webpack, esbuild, and more +
+ + + +## Development + +This project use [GitHub GraphQL API](https://docs.github.com/en/graphql) to generate the showcase data. So you need to create a [GitHub Personal Access Token](https://github.com/settings/personal-access-tokens/new) first. + +```bash +cp .env.example .env +``` + +```ini +# .env +GITHUB_TOKEN={{ theme }}+ +### Page Data +
{{ page }}+ +### Page Frontmatter +
{{ frontmatter }}+``` + + + +## Results + +### Theme Data +
{{ theme }}+ +### Page Data +
{{ page }}+ +### Page Frontmatter +
{{ frontmatter }}+ +## More + +Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata). diff --git a/docs/guide/index.md b/docs/guide/index.md new file mode 100644 index 00000000..62b0582f --- /dev/null +++ b/docs/guide/index.md @@ -0,0 +1,349 @@ +--- +outline: deep +lastUpdated: false +--- + +# Getting Started + +## Overview + +**Unplugin** is a library that offers an unified plugin system for various build tools. It extends the excellent [Rollup plugin API](https://rollupjs.org/plugin-development/#plugins-overview) to serve as the standard plugin interface, and provides a compatibility layer based on the build tools employed. + +**Unplugin** current supports: + +- [Vite](https://vitejs.dev/) +- [Rollup](https://rollupjs.org/) +- [webpack](https://webpack.js.org/) +- [esbuild](https://esbuild.github.io/) +- [Rspack](https://www.rspack.dev/) (⚠️ experimental) +- [Rolldown](https://rolldown.rs/) (⚠️ experimental) + +## Trying It Online + +You can try **Unplugin** in your browser directly. + +[](https://stackblitz.com/~/github.com/yuyinws/unplugin-starter?file=src/index.ts) + +## Creating an Unplugin package + +```shell +npx degit unplugin/unplugin-starter unplugin-starter +``` +> Check the [unplugin-starter](https://github.com/unplugin/unplugin-starter) repository for more details. + +## Plugin Installation + +### Pre-requisites + +- Node.js 14.0.0 or later + +::: warning +We will discontinue support for Node.js v14 & v16 in the next major release. +Please consider upgrading to Node.js v18 or higher. +::: + +### Install package + +::: code-group + +```bash [npm] +npm install unplugin-starter --save-dev +``` + +```bash [yarn] +yarn add unplugin-starter -D +``` + +```bash [pnpm] +pnpm add unplugin-starter -D +``` + +```bash [bun] +bun add unplugin-starter -D +``` +::: + +### Bundler & Framework Integration + +::: code-group + +```ts [Vite] +// vite.config.ts +import Starter from 'unplugin-starter/vite' + +export default defineConfig({ + plugins: [ + Starter({ /* options */ }), + ], +}) +``` + +```js [Rollup] +// rollup.config.js +import Starter from 'unplugin-starter/rollup' + +export default { + plugins: [ + Starter({ /* options */ }), + ], +} +``` + +```js [webpack] +// webpack.config.js +module.exports = { + /* ... */ + plugins: [ + require('unplugin-starter/webpack')({ /* options */ }) + ] +} +``` + +```js [Rspack] +// rspack.config.js +module.exports = { + /* ... */ + plugins: [ + require('unplugin-starter/rspack')({ /* options */ }) + ] +} +``` + +```js [esbuild] +// esbuild.config.js +import { build } from 'esbuild' +import Starter from 'unplugin-starter/esbuild' + +build({ + plugins: [Starter()], +}) +``` + +```js [Vue-CLI] +// vue.config.js +module.exports = { + configureWebpack: { + plugins: [ + require('unplugin-starter/webpack')({ /* options */ }), + ], + }, +} +``` + +```js [Nuxt] +// nuxt.config.ts +export default defineNuxtConfig({ + modules: [ + ['unplugin-starter/nuxt', { /* options */ }], + ], +}) +``` + +```js [Astro] +// astro.config.mjs +import { defineConfig } from 'astro/config' +import Starter from 'unplugin-turbo-console/astro' + +// https://astro.build/config +export default defineConfig({ + integrations: [ + Starter() + ] +}) +``` + +## Supported Hooks + +| Hook | Rollup | Vite | webpack 4 | webpack 5 | esbuild | Rspack | +| ----------------------------------------------------------------------------------| :-------------: | :--: | :-------: | :-------: | :-----------: | :----: | +| [`enforce`](https://vitejs.dev/guide/api-plugin.html#plugin-ordering) | ❌ 1 | ✅ | ✅ | ✅ | ❌ 1 | ✅ | +| [`buildStart`](https://rollupjs.org/plugin-development/#buildstart) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [`resolveId`](https://rollupjs.org/plugin-development/#resolveid) | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | +| `loadInclude`2 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [`load`](https://rollupjs.org/plugin-development/#load) | ✅ | ✅ | ✅ | ✅ | ✅ 3 | ✅ | +| `transformInclude`2 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [`transform`](https://rollupjs.org/plugin-development/#transform) | ✅ | ✅ | ✅ | ✅ | ✅ 3 | ✅ | +| [`watchChange`](https://rollupjs.org/plugin-development/#watchchange) | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | +| [`buildEnd`](https://rollupjs.org/plugin-development/#buildend) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [`writeBundle`](https://rollupjs.org/plugin-development/#writebundle)4 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | + +::: details Notice +1. Rollup and esbuild do not support using `enforce` to control the order of plugins. Users need to maintain the order manually. +2. webpack's id filter is outside of loader logic; an additional hook is needed for better perf on webpack. In Rollup and Vite, this hook has been polyfilled to match the behaviors. See for the following usage examples. +3. Although esbuild can handle both JavaScript and CSS and many other file formats, you can only return JavaScript in `load` and `transform` results. +4. Currently, `writeBundle` is only serves as a hook for the timing. It doesn't pass any arguments. +::: + +### Usage + +```ts{12-14,16-18} twoslash +import type { UnpluginFactory } from 'unplugin' +import { createUnplugin } from 'unplugin' + +export interface Options { + // define your plugin options here +} + +export const unpluginFactory: UnpluginFactory