如何生成供代码评审使用的人类可读CSS与JS打包文件

落地方案 #

你可以用Vite配合自定义插件实现完全符合要求的输出，配置成本极低，不需要自行处理模块解析、依赖排序等复杂逻辑：

1. CSS打包处理 #

用PostCSS的postcss-import插件即可完美处理CSS的@import语句拼接，同时可自定义注释插入逻辑，保留每个源文件的来源标记，输出的代码完全保留原有格式，不会压缩混淆：

• 配置postcss.config.js开启postcss-import，同时添加自定义转换钩子，在每个导入的CSS文件内容前插入对应的源文件注释，原有@import语句可自动注释。

2. JS模块打包处理 #

用Vite底层的Rollup配合自定义配置，完全禁用压缩混淆，开启保留注释、保留代码格式的选项，同时添加自定义插件处理ES模块转普通脚本的逻辑：

• 配置Rollup的输出格式为块级作用域包裹的普通脚本，自动注入'use strict'
• 自定义插件在每个模块的代码前插入对应源文件的注释，原有import/export语句自动注释或替换
• 配置输出时自动移除HTML中script标签的type="module"属性，同时添加你需要的工具说明注释

3. 轻量替代方案（小项目适用） #

如果你的项目模块数量很少，不想搭构建工具，可以用esbuild配合简单的Node.js脚本实现：

• esbuild本身支持保留代码格式输出，只要设置minify: false、format: 'iife'
• 用简易Node.js脚本读取所有CSS文件，处理@import后拼接，插入对应注释即可

最简配置示例 #

你只需要在项目根目录添加两个配置文件就能实现需求：

1. 依赖安装

npm install vite postcss-import

2. vite.config.js

import { defineConfig } from 'vite'
import { resolve } from 'path'

export default defineConfig({
  build: {
    rollupOptions: {
      input: resolve(__dirname, 'src/demo/index.html'),
      output: {
        format: 'iife',
        preserveModules: false,
        entryFileNames: '[name].js',
        assetFileNames: '[name].[ext]'
      }
    },
    minify: false,
    outDir: 'dist/demo'
  },
  plugins: [
    {
      name: 'custom-comment-insert',
      transform(code, id) {
        // 给每个JS/CSS模块插入来源注释
        if (id.includes('src/demo/')) {
          const fileName = id.split('src/demo/')[1]
          if (id.endsWith('.js')) {
            return `// ${fileName}\n${code}`
          }
          if (id.endsWith('.css')) {
            return `/* ${fileName} */\n${code}`
          }
        }
      },
      transformIndexHtml(html) {
        // 移除script的type=module属性，插入头部注释
        return html.replace('type="module"', '')
          .replace('<!DOCTYPE html>', `<!DOCTYPE html>\n\n<!-- Tooling: The source directory is src/demo -->\n<!-- Tooling: This file is generated from index.html -->`)
      }
    }
  ],
  css: {
    postcss: {
      plugins: [require('postcss-import')()]
    }
  }
})

运行npx vite build即可得到和你示例几乎完全一致的输出，所有代码保留原有格式，每个文件来源都有明确注释，无混淆完全可读，直接双击HTML就能在浏览器运行不需要服务器。

内容的提问来源于stack exchange，提问作者rectangle