|
1 | 1 | # Quick Start
|
2 | 2 |
|
3 |
| -`code-inspector-plugin` supports projects using `webpack/vite/rspack/rsbuild/esbuild/farm/nextjs/nuxt/umijs` as bundlers, and works with frameworks like `vue/react/preact/solid/qwik/svelte/astro`. Please refer to the following integration guide. |
| 3 | +`code-inspector-plugin` supports projects using `webpack/vite/rspack/rsbuild/esbuild/farm/mako` as bundlers, and works with frameworks like `vue/react/preact/solid/qwik/svelte/astro/nextjs/nuxt/umijs`. Please refer to the following integration guide. |
4 | 4 |
|
5 | 5 | ## Installation
|
6 | 6 |
|
@@ -162,130 +162,135 @@ module.exports = {
|
162 | 162 |
|
163 | 163 | ::: details Click to view nuxt project configuration
|
164 | 164 |
|
165 |
| -nuxt3.x: |
| 165 | +- nuxt3.x: |
166 | 166 |
|
167 |
| -```js |
168 |
| -// nuxt.config.js |
169 |
| -import { codeInspectorPlugin } from 'code-inspector-plugin'; |
| 167 | + ```js |
| 168 | + // nuxt.config.js |
| 169 | + import { codeInspectorPlugin } from 'code-inspector-plugin'; |
170 | 170 |
|
171 |
| -// https://nuxt.com/docs/api/configuration/nuxt-config |
172 |
| -export default defineNuxtConfig({ |
173 |
| - vite: { |
174 |
| - plugins: [codeInspectorPlugin({ bundler: 'vite' })], |
175 |
| - }, |
176 |
| -}); |
177 |
| -``` |
| 171 | + // https://nuxt.com/docs/api/configuration/nuxt-config |
| 172 | + export default defineNuxtConfig({ |
| 173 | + vite: { |
| 174 | + plugins: [codeInspectorPlugin({ bundler: 'vite' })], |
| 175 | + }, |
| 176 | + }); |
| 177 | + ``` |
178 | 178 |
|
179 |
| -nuxt2.x: |
| 179 | +- nuxt2.x: |
180 | 180 |
|
181 |
| -```js |
182 |
| -// nuxt.config.js |
183 |
| -import { codeInspectorPlugin } from 'code-inspector-plugin'; |
| 181 | + ```js |
| 182 | + // nuxt.config.js |
| 183 | + import { codeInspectorPlugin } from 'code-inspector-plugin'; |
184 | 184 |
|
185 |
| -export default { |
186 |
| - build: { |
187 |
| - extend(config) { |
188 |
| - config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' })); |
189 |
| - return config; |
| 185 | + export default { |
| 186 | + build: { |
| 187 | + extend(config) { |
| 188 | + config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' })); |
| 189 | + return config; |
| 190 | + }, |
190 | 191 | },
|
191 |
| - }, |
192 |
| -}; |
193 |
| -``` |
| 192 | + }; |
| 193 | + ``` |
194 | 194 |
|
195 | 195 | :::
|
196 | 196 |
|
197 | 197 | ::: details Click to view next.js project configuration
|
198 | 198 |
|
199 |
| -next <= 14.x : |
| 199 | +- next <= 14.x : |
200 | 200 |
|
201 |
| -```js |
202 |
| -// next.config.js |
203 |
| -const { codeInspectorPlugin } = require('code-inspector-plugin'); |
| 201 | + ```js |
| 202 | + // next.config.js |
| 203 | + const { codeInspectorPlugin } = require('code-inspector-plugin'); |
204 | 204 |
|
205 |
| -const nextConfig = { |
206 |
| - webpack: (config, { dev, isServer }) => { |
207 |
| - config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' })); |
208 |
| - return config; |
209 |
| - }, |
210 |
| -}; |
| 205 | + const nextConfig = { |
| 206 | + webpack: (config, { dev, isServer }) => { |
| 207 | + config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' })); |
| 208 | + return config; |
| 209 | + }, |
| 210 | + }; |
211 | 211 |
|
212 |
| -module.exports = nextConfig; |
213 |
| -``` |
| 212 | + module.exports = nextConfig; |
| 213 | + ``` |
214 | 214 |
|
215 |
| -next 15.0.x ~ 15.2.x : |
| 215 | +- next 15.0.x ~ 15.2.x : |
216 | 216 |
|
217 |
| -```js |
218 |
| -// next.config.js |
219 |
| -import type { NextConfig } from 'next'; |
220 |
| -import { codeInspectorPlugin } from 'code-inspector-plugin'; |
| 217 | + ```js |
| 218 | + // next.config.js |
| 219 | + import type { NextConfig } from 'next'; |
| 220 | + import { codeInspectorPlugin } from 'code-inspector-plugin'; |
221 | 221 |
|
222 |
| -const nextConfig: NextConfig = { |
223 |
| - experimental: { |
224 |
| - turbo: { |
225 |
| - rules: codeInspectorPlugin({ |
226 |
| - bundler: 'turbopack', |
227 |
| - }), |
| 222 | + const nextConfig: NextConfig = { |
| 223 | + experimental: { |
| 224 | + turbo: { |
| 225 | + rules: codeInspectorPlugin({ |
| 226 | + bundler: 'turbopack', |
| 227 | + }), |
| 228 | + }, |
228 | 229 | },
|
229 |
| - }, |
230 |
| -}; |
| 230 | + }; |
231 | 231 |
|
232 |
| -export default nextConfig; |
233 |
| -``` |
| 232 | + export default nextConfig; |
| 233 | + ``` |
234 | 234 |
|
235 |
| -next >= 15.3.x : |
| 235 | +- next >= 15.3.x : |
236 | 236 |
|
237 |
| -```js |
238 |
| -// next.config.js |
239 |
| -import type { NextConfig } from 'next'; |
240 |
| -import { codeInspectorPlugin } from 'code-inspector-plugin'; |
| 237 | + ```js |
| 238 | + // next.config.js |
| 239 | + import type { NextConfig } from 'next'; |
| 240 | + import { codeInspectorPlugin } from 'code-inspector-plugin'; |
241 | 241 |
|
242 |
| -const nextConfig: NextConfig = { |
243 |
| - turbopack: { |
244 |
| - rules: codeInspectorPlugin({ |
245 |
| - bundler: 'turbopack', |
246 |
| - }), |
247 |
| - }, |
248 |
| -}; |
| 242 | + const nextConfig: NextConfig = { |
| 243 | + turbopack: { |
| 244 | + rules: codeInspectorPlugin({ |
| 245 | + bundler: 'turbopack', |
| 246 | + }), |
| 247 | + }, |
| 248 | + }; |
249 | 249 |
|
250 |
| -export default nextConfig; |
251 |
| -``` |
| 250 | + export default nextConfig; |
| 251 | + ``` |
252 | 252 |
|
253 | 253 | :::
|
254 | 254 |
|
255 | 255 | ::: details Click to view umi.js project configuration
|
256 | 256 |
|
257 |
| -```js |
258 |
| -// umi.config.js or umirc.js |
259 |
| -import { defineConfig } from '@umijs/max'; |
260 |
| -import { codeInspectorPlugin } from 'code-inspector-plugin'; |
| 257 | +- With webpack: |
261 | 258 |
|
262 |
| -export default defineConfig({ |
263 |
| - chainWebpack(memo) { |
264 |
| - memo.plugin('code-inspector-plugin').use( |
265 |
| - codeInspectorPlugin({ |
266 |
| - bundler: 'webpack', |
267 |
| - }) |
268 |
| - ); |
269 |
| - }, |
270 |
| - // other config |
271 |
| -}); |
272 |
| -``` |
| 259 | + ```js |
| 260 | + // umi.config.js or umirc.js |
| 261 | + import { defineConfig } from '@umijs/max'; |
| 262 | + import { codeInspectorPlugin } from 'code-inspector-plugin'; |
273 | 263 |
|
274 |
| -::: |
| 264 | + export default defineConfig({ |
| 265 | + chainWebpack(memo) { |
| 266 | + memo.plugin('code-inspector-plugin').use( |
| 267 | + codeInspectorPlugin({ |
| 268 | + bundler: 'webpack', |
| 269 | + }) |
| 270 | + ); |
| 271 | + }, |
| 272 | + // other config |
| 273 | + }); |
| 274 | + ``` |
275 | 275 |
|
276 |
| -::: details Click to view astro project configuration |
| 276 | +- With mako: |
277 | 277 |
|
278 |
| -```js |
279 |
| -// astro.config.mjs |
280 |
| -import { defineConfig } from 'astro/config'; |
281 |
| -import { codeInspectorPlugin } from 'code-inspector-plugin'; |
| 278 | + ```ts |
| 279 | + // .umirc.ts |
| 280 | + import { defineConfig } from 'umi'; |
| 281 | + import { codeInspectorPlugin } from 'code-inspector-plugin'; |
282 | 282 |
|
283 |
| -export default defineConfig({ |
284 |
| - vite: { |
285 |
| - plugins: [codeInspectorPlugin({ bundler: 'vite' })], |
286 |
| - }, |
287 |
| -}); |
288 |
| -``` |
| 283 | + export default defineConfig({ |
| 284 | + // other config... |
| 285 | + mako: { |
| 286 | + plugins: [ |
| 287 | + codeInspectorPlugin({ |
| 288 | + bundler: 'mako', |
| 289 | + }), |
| 290 | + ], |
| 291 | + }, |
| 292 | + }); |
| 293 | + ``` |
289 | 294 |
|
290 | 295 | :::
|
291 | 296 |
|
|
0 commit comments