如何将React作为NPM包添加到Apostrophe v3中？

Apostrophe CMS v3 接入React应用（npm包导入方式） #

这种方式是官方支持的最佳实践，完全可以替代CDN引入的方案，操作步骤如下：

1. 安装核心依赖 #

在Apostrophe项目根目录执行安装命令：
npm install react react-dom @babel/preset-react --save

2. 配置JSX语法解析 #

在项目根目录创建babel.config.json文件，添加以下配置让Apostrophe内置的Babel识别JSX语法：

{
  "presets": [
    "@babel/preset-react"
  ]
}

3. 创建React应用入口 #

• 在项目modules目录下新建自定义模块，比如命名为custom-react-app
• 在该模块下创建ui/src/index.js文件，编写React应用的挂载逻辑，示例代码如下：

import React from 'react'
import ReactDOM from 'react-dom/client'
// 导入你自己开发的React根组件
import App from './App'

document.addEventListener('DOMContentLoaded', () => {
  const rootNode = document.getElementById('react-root')
  if (rootNode) {
    const root = ReactDOM.createRoot(rootNode)
    root.render(<App />)
  }
})

• 把你开发的所有React组件文件都放到custom-react-app/ui/src/目录下即可

4. 注册模块并配置资源加载 #

在custom-react-app模块的index.js文件中添加以下配置，让Apostrophe自动打包并加载React相关资源：

module.exports = {
  // 开启前端资源构建
  assets: {
    esm: {
      // 配置入口文件自动加载到所有页面
      entryPoints: ['index.js']
    }
  }
}

然后在项目根目录的app.js中注册该模块：

require('apostrophe')({
  modules: {
    // 其他已有模块...
    'custom-react-app': {}
  }
})

5. 页面中添加挂载节点 #

在需要渲染React应用的模板文件（比如页面模板、碎片模板）中添加挂载节点即可：
<div id="react-root"></div>

可选优化配置 #

• 如果不需要React资源全局加载，可以去掉entryPoints配置，在需要用到的模板中通过{{ apos.assets.js('custom-react-app:index.js') }}手动引入资源，减少冗余加载
• React组件中可以直接导入apostrophe模块调用Apostrophe前端内置API，无需额外配置

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