使用npm pack更新包后，测试项目中FormGroup.tsx未同步更新

核心原因 #

包文件本身已更新，但Chrome开发者工具显示旧代码，主要是浏览器缓存、测试项目构建缓存，或模块导出/导入路径配置问题导致。以下是针对性解决方案：

解决方案 #

1. 强制清除浏览器缓存 #

• 硬刷新页面：Windows/Linux按 Ctrl+Shift+R，Mac按 Cmd+Shift+R
• 彻底清空缓存：打开DevTools → 点击刷新按钮旁的下拉箭头 → 选择「清空缓存并硬性重新加载」
• 临时禁用缓存：DevTools → 右上角设置图标 → 勾选「Disable cache (while DevTools is open)」，避免后续测试被缓存干扰

2. 清除测试项目的构建缓存 #

根据测试项目使用的构建工具操作：

• Create React App：删除 node_modules/.cache 文件夹，或启动时执行 npm start -- --no-cache
• Vite：执行 npx vite --force，或删除 node_modules/.vite 文件夹
• 通用操作：删除测试项目的 dist（或 build）文件夹，重新执行构建命令

3. 给构建产物添加内容哈希（彻底规避缓存） #

TypeScript原生tsc不支持自动给输出文件加哈希，可改用Rollup/Webpack构建：

• 以Rollup为例，先安装依赖：

  npm install rollup @rollup/plugin-typescript @rollup/plugin-node-resolve rollup-plugin-terser --save-dev
  

• 创建rollup.config.js配置文件：

  import typescript from '@rollup/plugin-typescript';
  import resolve from '@rollup/plugin-node-resolve';
  import terser from 'rollup-plugin-terser';
  
  export default {
    input: 'src/index.tsx',
    output: [
      {
        file: 'dist/index.[hash].js',
        format: 'cjs',
        sourcemap: true,
        plugins: [terser()]
      }
    ],
    plugins: [resolve(), typescript()]
  };
  

• 更新package.json的scripts.build为rollup -c，并调整main/exports指向带哈希的输出文件

4. 检查导入路径与导出配置 #

• 确认测试项目中FormGroup的导入路径正确：

  // 正确：从包根导出导入
  import { FormGroup } from 'your-package-name';
  // 错误：直接导入dist目录（易引发缓存）
  import FormGroup from 'your-package-name/dist/FormGroup';
  

• 若需单独导出FormGroup，更新package.json的exports字段：

  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "default": "./dist/index.js"
    },
    "./FormGroup": {
      "types": "./dist/FormGroup.d.ts",
      "default": "./dist/FormGroup.js"
    }
  }
  

• 确保src/index.tsx中正确导出：export { FormGroup } from './FormGroup';

5. 清除npm缓存与锁定文件 #

• 执行 npm cache clean --force 清除本地npm缓存
• 在测试项目中，删除package-lock.json（或yarn.lock），再重新执行卸载/安装命令：npm uninstall your-package-name && npm i ./path/to/your-package.tgz，避免锁定文件复用旧包内容

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