使用Rollup打包的React单组件项目如何搭建实时预览开发流程？

一、常规开发工作流概览 #

• 组件库仓库和业务项目仓库完全隔离，所有组件修改都在fork后的独立仓库完成
• 本地开发阶段配置轻量预览环境，修改组件代码可实时验证效果
• 功能验证通过后用Rollup打生产包，通过npm link、私有npm源或者直接安装仓库包的方式引入业务项目使用

二、实时预览实现方案（规避React重复实例问题） #

推荐直接用Vite搭建预览环境，操作简便且热更新速度快，不需要单独建子项目引入打包产物，步骤如下：

• 首先安装开发依赖：npm install -D vite @vitejs/plugin-react react react-dom
• 根目录新建vite.config.ts配置文件：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  root: './dev', // 预览入口单独放在dev目录，和组件源码隔离
})

• 新建dev目录，里面新增两个预览入口文件：
  1. index.html

  <!DOCTYPE html>
  <html lang="en">
  <body>
    <div id="root"></div>
    <script type="module" src="./main.tsx"></script>
  </body>
  </html>
  

  2. main.tsx，直接引入组件源码，不需要引入打包产物

  import React from 'react'
  import ReactDOM from 'react-dom/client'
  import YourComponent from '../src/index.tsx'
  
  ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
      {/* 这里可以传入测试props验证组件效果 */}
      <YourComponent />
    </React.StrictMode>,
  )
  

• 在package.json中新增启动脚本："dev": "vite"
• 运行npm run dev即可获得和create-react-app一致的开发体验，修改src/index.tsx的组件代码时页面会自动热更新，整个预览环境只有一个React实例，不会出现无效Hook调用错误。

如果你更习惯用Rollup watch模式配合业务项目预览，需要做如下配置避免React重复：

• 把组件库package.json里的react、react-dom从dependencies移到peerDependencies中
• 在rollup.config.js里把react和react-dom设为外部依赖，不要打进组件产物：

export default {
  // 其他原有配置
  external: ['react', 'react-dom'],
  output: {
    // 其他原有output配置
    globals: {
      react: 'React',
      'react-dom': 'ReactDOM'
    }
  }
}

• 组件库开启rollup -c -w监听修改实时打包，业务项目用npm link链接组件库后启动开发服务即可同步预览修改。

三、无效Hook调用问题根因 #

该错误就是你怀疑的React重复实例导致的：你之前的子项目引入父项目打包产物的方案里，组件库把React打包进了产物，子项目本身又有独立的React依赖，页面运行时加载了两个不同的React实例，Hook只能在同一实例的组件上下文调用，因此触发报错。
按照上面的方案将react/react-dom设为peer依赖并在打包时排除，或者直接用Vite预览方案直接引入组件源码，即可彻底解决该问题。

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