如何基于Vite为Liferay DXP 7.4创建Client Extension类型React应用？

1. 环境准备 #

• 本地安装Node.js（推荐16.x及以上版本）和包管理器（npm/yarn/pnpm任选其一）
• 全局安装Liferay CLI工具：npm install -g @liferay/cli
• 确保本地运行着Liferay DXP 7.4实例，或已配置好远程实例的连接信息

2. 创建Client Extension项目 #

• 用Liferay CLI初始化自定义元素类型的CX项目：

  liferay init client-extension my-react-cx --type custom-element
  

• 进入项目目录：cd my-react-cx

3. 集成Vite与React #

• 进入项目的src目录，初始化Vite React项目：

  cd src
  npm create vite@latest . -- --template react
  

• 安装项目依赖：npm install
• 修改vite.config.js，适配Liferay自定义元素的构建要求：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    build: {
      lib: {
        entry: './src/main.jsx', // 你的React应用入口文件
        name: 'MyReactCustomElement',
        formats: ['es'],
        fileName: () => 'my-react-element.js'
      },
      rollupOptions: {
        external: ['react', 'react-dom'],
        output: {
          globals: {
            react: 'React',
            reactDom: 'ReactDOM'
          }
        }
      }
    }
  })
  

4. 将React应用封装为自定义元素 #

• 修改React入口文件（如src/main.jsx），把React组件包装成原生自定义元素：

  import React from 'react'
  import ReactDOM from 'react-dom/client'
  import App from './App.jsx'
  import './index.css'
  
  class MyReactElement extends HTMLElement {
    connectedCallback() {
      const root = ReactDOM.createRoot(this)
      root.render(<React.StrictMode><App /></React.StrictMode>)
    }
  }
  
  customElements.define('my-react-element', MyReactElement)
  

5. 配置Client Extension清单 #

• 编辑项目根目录的liferay-client-extension.yaml，确保指向Vite构建后的产物：

  name: my-react-cx
  type: custom-element
  url: build/my-react-element.js
  

6. 构建并部署到Liferay #

• 在src目录执行Vite构建：npm run build
• 返回CX项目根目录，部署到Liferay实例：

  liferay deploy
  

7. 添加到Liferay页面 #

• 登录Liferay后台，进入页面编辑模式
• 在「添加」菜单的「自定义元素」分类下，找到你的my-react-element组件，添加到页面
• 保存页面后，即可看到React应用在Liferay页面中运行

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