Rollup-plugin-critical 使用教程

Rollup-plugin-critical 使用教程

rollup-plugin-critical Vite.js & Rollup plugin for generating critical CSS 项目地址: https://gitcode.com/gh_mirrors/ro/rollup-plugin-critical

1. 项目目录结构及介绍

rollup-plugin-critical 是一个用于生成关键 CSS 的 Vite.js 和 Rollup 插件。项目目录结构如下：

rollup-plugin-critical/
├── .github/              # GitHub 工作流和配置文件
├── dist/                 # 编译后的文件
├── src/                  # 源代码
├── .gitattributes        # Git 属性配置
├── .gitignore            # Git 忽略文件配置
├── .scrutinizer.yml      # Scrutinizer 配置
├── CHANGELOG.md          # 更改日志
├── Dockerfile            # Docker 配置
├── LICENSE.md            # 许可证文件
├── Makefile              # Makefile 配置
├── README.md             # 项目说明文件
├── eslint.config.js      # ESLint 配置
├── package-lock.json     # 包版本锁定文件
├── package.json          # 包配置文件
├── tsconfig.json         # TypeScript 配置
└── vitest.config.ts      # Vitest 配置

• .github/: 包含 GitHub 工作流和配置文件，用于自动化测试、发布等。
• dist/: 包含编译后的文件。
• src/: 包含插件源代码。
• .gitattributes: 配置 Git 属性。
• .gitignore: 指定 Git 忽略的文件。
• .scrutinizer.yml: Scrutinizer 配置文件，用于代码质量检查。
• CHANGELOG.md: 记录项目的更改历史。
• Dockerfile: 用于构建 Docker 镜像的配置文件。
• LICENSE.md: 项目使用的许可证信息。
• Makefile: 用于构建和测试项目的 Makefile 配置。
• README.md: 项目说明文件，介绍项目的使用方法和功能。
• eslint.config.js: ESLint 配置文件，用于代码风格检查。
• package-lock.json: 包版本锁定文件，确保项目依赖的一致性。
• package.json: 包配置文件，包含项目的依赖、脚本等信息。
• tsconfig.json: TypeScript 配置文件。
• vitest.config.ts: Vitest 配置文件，用于单元测试。

2. 项目的启动文件介绍

项目的启动主要是通过 package.json 中的脚本实现的。以下是 package.json 中定义的一些常用脚本：

{
  "scripts": {
    "build": "rollup -c",
    "watch": "rollup -c -w",
    "test": "vitest",
    "test:watch": "vitest --watch"
  }
}

• build: 使用 Rollup 进行项目编译。
• watch: 监听文件变化，并在文件变化时重新编译。
• test: 运行单元测试。
• test:watch: 监听文件变化，并在文件变化时重新运行单元测试。

可以通过在命令行中运行 npm run build 等命令来启动相应的脚本。

3. 项目的配置文件介绍

以下是项目中的几个主要配置文件及其介绍：

• package.json: 包配置文件，其中定义了项目的依赖、脚本和元数据等。

  {
    "name": "rollup-plugin-critical",
    "version": "1.0.15",
    "description": "Vite.js & Rollup plugin for generating critical CSS",
    "main": "dist/rollup-plugin-critical.js",
    "scripts": {
      "build": "rollup -c",
      "watch": "rollup -c -w",
      "test": "vitest",
      "test:watch": "vitest --watch"
    },
    "dependencies": {
      "critical": "^2.0.0"
    },
    "devDependencies": {
      "rollup": "^2.0.0",
      "vitest": "^0.0.0"
    }
  }
  

• rollup.config.js: Rollup 的配置文件，用于配置 Rollup 的打包行为。

  import PluginCritical from 'rollup-plugin-critical';
  
  export default {
    input: 'src/index.js',
    output: {
      dir: 'dist',
      format: 'es'
    },
    plugins: [
      PluginCritical({
        criticalUrl: 'https://nystudio107.com/',
        criticalBase: './',
        criticalPages: [
          { uri: '', template: 'index' },
          { uri: 'about', template: 'about/index' }
        ],
        criticalConfig: {}
      })
    ]
  };
  

• vitest.config.ts: Vitest 的配置文件，用于配置单元测试。

  import { defineConfig } from 'vitest/config';
  
  export default defineConfig({
    test: {
      // 配置项
    }
  });
  

这些配置文件为项目的开发、编译和测试提供了所需的配置。开发者可以根据自己的需求对这些文件进行修改和扩展。

rollup-plugin-critical Vite.js & Rollup plugin for generating critical CSS 项目地址: https://gitcode.com/gh_mirrors/ro/rollup-plugin-critical