Windi CSS 視覺分析儀

Windi CSS 的可視化分析工具。瀏覽您的實用程序用法，了解您的設(shè)計系統(tǒng)，識別“不良做法”等等！

開始

在您的項目根目錄中運行以下命令

npx windicss-analysis

分析報告將在 http://localhost:8113/ 上提供

NPM

或者您可以在本地安裝它以使用與本地 windss 模塊相同的版本

npm i -D windicss-analysis

package.json

{
  "scripts": {
    "analysis": "windicss-analysis"
  }
}

VS Code 插件

從 Windi CSS Intellisense v0.8.0 開始，它內(nèi)置了這個分析器。

• 在 VS Code 中使用 Windi CSS 打開一個項目

• 打開命令面板 (??P / Ctrl+Shift+P)

• 運行命令：Windi CSS：運行并打開分析

• 請參閱第二個編輯器列中的 Analyzer

在線預(yù)覽

您可以在 analysis-demo.windicss.org 預(yù)覽分析器本身的報告

您可以生成自己的報告并通過運行以下命令靜態(tài)托管它：

npx windicss-analysis --html dist

常見問題

它沒有檢測到我的文件

您需要在 windi.config.js 中顯式配置 extract.include 選項而不是框架的配置文件，以便分析器可以理解它。例如：

?windi.config.js?

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  extract: {
    include: [
      'src/**/*.{vue,jsx,tsx,svelte}',
      'shared/**/*.{vue,ts}',
    ],
  },
})

我可以將該報告用于其他工具嗎？

是的。您可以通過 CLI 獲取原始 JSON 文件

npx windicss-analysis --json report.json

并根據(jù)需要進(jìn)行處理。

您還可以通過以下方式為其提供類型支持：

import rawReport from './report.json'
import type { AnalysisReport } from 'windicss-analysis'

const report = rawReport as AnalysisReport

我可以以編程方式使用 Windi CSS 嗎？

是的，就像一個普通的 Node 包：

import { startServer } from 'windicss-analysis'

startServer({ /* ... */ })

查看類型聲明以查看可用的 API。