如何在Ghost CMS现有模板中集成React.js组件？——知识分享

若用户希望在现有Ghost CMS模板中添加React组件，而无需创建新的React应用，该如何操作？

实现步骤 #

我先是研究了纯HTML中引入React的方案，再适配到Ghost的Handlebars模板中，同时理清了webpack和babel的作用场景，具体操作如下：

• 引入React与ReactDOM的UMD版本
  在Ghost主题的Handlebars模板（比如default.hbs）的<body>末尾，添加React和ReactDOM的CDN链接，让浏览器直接加载使用：

  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  

  开发阶段可替换为development.min.js版本，方便调试。

• 添加Babel支持处理JSX
  浏览器原生不识别JSX语法，需引入Babel独立编译版本实时转换：

  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  

  编写React组件的脚本标签必须加上type="text/babel"属性，让Babel识别并编译其中代码。

• 在模板中编写并挂载React组件
  先在模板目标位置添加挂载容器：

  <div id="react-component-container"></div>
  

  接着编写组件代码并挂载：

  <script type="text/babel">
    // 自定义React组件
    function GhostReactWidget() {
      return (
        <div className="ghost-react-widget">
          <h3>React组件嵌入成功</h3>
          <p>这里可编写任意React逻辑，比如状态管理、事件处理等</p>
        </div>
      );
    }
  
    // 挂载组件到容器
    const root = ReactDOM.createRoot(document.getElementById('react-component-container'));
    root.render(<GhostReactWidget />);
  </script>
  

• 复杂场景下使用webpack+Babel打包
  若组件依赖第三方库、需要代码拆分或使用ES6+高级特性，CDN方式会有局限性。此时需用webpack和babel打包组件：

  1. 初始化小型项目，配置babel编译JSX和ES6代码
  2. 用webpack将组件打包为独立生产版JS文件
  3. 将打包后的JS文件上传至Ghost静态资源目录，在模板中通过<script>标签引入即可
     这种方式更适配生产环境，能优化加载性能与兼容性。

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