Rollup 打包配置 ​

在 Monorepo 项目中配置 Rollup 打包，同时也是重构 tampermonkey-scripts 项目的踩坑和总结，如需完整代码，可以查看该项目源码

Rollup 是一个用于 JavaScript 的模块打包工具，常用于类库的打包，其打包速度快、体积小

配置 Rollup 打包 ​

在 Monorepo 项目中，每一个子包都是独立的项目，所以需要在每个子包中配置 Rollup 打包，而每个子包的基础配置都是相同的，所以我们可以把 Rollup 的一些公共配置抽离出来，然后在每个子包中引入，从而实现代码的复用

同时为了方便管理和简化使用，可以把公共配置抽离到一个单独的子包中，并将其安装为公共依赖

初始化 rollup-config 子包 ​

    npm init -w shared/rollup-config -y
    
    # 删除 package.json 中的 workspaces 属性
    npm pkg delete workspaces

修改 pnpm-workspace.yaml

内容如下：

    packages:
      - 'packages/*'
      - 'shared/*'

修改 package.json

如果仅在 Monorepo 项目中使用，可以将 private 属性设置为 true，防止被发布到 npm

    {
      "name": "@femm/shared-rollup-config",
      "version": "1.0.0",
      "private": true,
      "type": "module",
      "main": "src/index.js"
      // 其他配置可以根据需要自行添加
    }

安装依赖

rollup 为公共依赖（每一个子包都需要使用 rollup 命令）

    # 安装 rollup
    pnpm add -Dw rollup

rollup 插件为 rollup-config 子包的私有依赖

• @rollup/plugin-terser 用于压缩代码（主要用于删除注释）
• rollup-plugin-postcss 用于处理 CSS
• rollup-plugin-swc3 用于处理 JavaScript 和 TypeScript
• rollup-plugin-userscript-metablock 用于处理用户脚本的元数据

    pnpm -F "shared/rollup-config" add @rollup/plugin-terser rollup-plugin-postcss rollup-plugin-swc3 rollup-plugin-userscript-metablock

编写公共配置 ​

创建 src/index.js，内容如下：

    import path from 'node:path'
    import { defineConfig } from 'rollup'
    import postcss from 'rollup-plugin-postcss'
    import { swc } from 'rollup-plugin-swc3'
    import terser from '@rollup/plugin-terser'
    import metablock from 'rollup-plugin-userscript-metablock'
    
    export function createRollupConfig({ pkg, plugins = [] }) {
      const file = path.resolve(
        '../../',
        process.env.BUILD === 'development' ? 'dist-dev' : 'dist',
        `${pkg.name}.user.js`,
      )
    
      return defineConfig({
        input: 'src/index.ts',
        output: {
          file,
          format: 'iife',
        },
        plugins: [
          ...plugins,
          // 处理 CSS
          postcss({ minimize: true }),
          // 处理 JavaScript 和 TypeScript
          swc({
            jsc: { target: 'es5' },
          }),
          // 删除注释
          terser({
            mangle: {
              keep_fnames: true,
            },
            compress: {
              defaults: false,
            },
            format: {
              ascii_only: true,
              beautify: true,
              indent_level: 2,
            },
          }),
          // 注入脚本元数据
          metablock({
            override: {
              /* https://greasyfork.org/zh-CN/help/meta-keys */
              version: pkg.version,
              author: 'maomao1996',
              homepage: 'https://github.com/maomao1996/tampermonkey-scripts',
              supportURL: 'https://github.com/maomao1996/tampermonkey-scripts/issues',
              license: 'MIT',
            },
          }),
        ],
      })
    }

在其他子包中使用 rollup-config 子包 ​

安装 rollup-config 子包

    pnpm add -Dw @femm/shared-rollup-config

在子包中创建 rollup.config.js，内容如下：

    import { createRollupConfig } from '@femm/shared-rollup-config'
    
    import pkg from './package.json' assert { type: 'json' }
    
    export default createRollupConfig({ pkg })

修改子包的 package.json，内容如下：

    {
      "name": "kill-watermark",
      "version": "0.0.2",
      "private": true,
      "type": "module",
      "scripts": {
        "build": "rollup -c",
        "dev": "rollup --environment BUILD:development -c --watch"
      }
    }

• --environment BUILD:development 表示注入 BUILD 环境变量，值为 development
• -c 表示使用配置文件
• --watch 表示监听文件变化

修改主包的 package.json ​

    {
      // ... 省略其他配置
      "scripts": {
        "build": "pnpm -r build",
        "dev": "pnpm --stream --parallel -r dev",
      }
      // ... 省略其他配置
    }

---

相关资料

• 详细配置过程请阅读 —— 使用 rollup 打包用户脚本（user script）
• 参考了 rollup/plugins | GitHub 的相关代码

配置 TypeScript ​

安装 TypeScript

    pnpm add -Dw typescript

方案一：配置统一的 tsconfig.json ​

在主包中创建 tsconfig.json，内容如下：

    {
      "compilerOptions": {
        "target": "ES2022",
        "module": "ESNext",
        "lib": ["DOM", "ES2022"],
    
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
    
        "strict": true,
        "skipLibCheck": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true
      },
      "include": ["packages/**/*.ts", "shared/**/*.ts", "types/*.d.ts"]
    }

方案二：在每个子包中配置 tsconfig.json ​

为了方便管理和简化使用，同样将公共的 tsconfig.json 配置封装成一个子包中，并将其安装为公共依赖

创建 tsconfig 子包

    npm init -w shared/tsconfig -y
    
    # 删除 package.json 中的 workspaces 属性
    npm pkg delete workspaces

修改 tsconfig 子包的 package.json

    {
      "name": "@femm/shared-tsconfig",
      "version": "1.0.0",
      "private": true
    }

在 tsconfig 子包中创建 tsconfig.json 文件，内容如下：

    {
      "compilerOptions": {
        "target": "ES2022",
        "module": "ESNext",
        "lib": ["DOM", "ES2022"],
    
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
    
        "strict": true,
        "skipLibCheck": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true
      }
    }

在主包中安装 tsconfig 子包

    pnpm add -Dw @femm/shared-tsconfig

在每个子包中创建 tsconfig.json 文件，内容如下：

    {
      "extends": "@femm/shared-tsconfig"
    }

在所有子包中共享 TypeScript 类型 ​

在 TypeScript 项目中，其会自动加载 node_modules/@types 中的类型，所以我们可以把类型放到 node_modules/@types 中，从而在所有子包中共享

创建 types 子包

    npm init -w shared/types -y
    
    # 删除 package.json 中的 workspaces 属性
    npm pkg delete workspaces

修改 pnpm-workspace.yaml，内容如下：

    packages:
      - 'packages/*'
      - 'types'

修改 types 子包的 package.json

    {
      "name": "@types/shared-types",
      "version": "1.0.0",
      "private": true,
      "types": "./index.d.ts"
    }

WARNING

子包的 name 必须要以 @types/ 开头，否则 TypeScript 无法自动加载

编写 index.d.ts

    declare const unsafeWindow: Window

在主包中安装 types 子包

    pnpm add -Dw @types/shared-types

---

相关资料

参考了 tsconfig/bases | GitHub 的相关代码