使用hel-micro微服务实现在jsp项目中引入react组件

以下是一个完整的示例，涵盖 React子应用配置、JSP主应用集成 以及 样式隔离 的实现细节。我们将通过 CSS Modules 和 Shadow DOM 确保React样式与JSP样式互不干扰。

---

一、React子应用配置

1. 项目结构

react-module/
├── src/
│   ├── index.js       # 模块入口文件
│   ├── App.js        # React组件
│   └── App.module.css # 组件样式（CSS Modules）
├── webpack.config.js  # Webpack配置
└── package.json

2. 关键文件代码

a. src/App.module.css
使用CSS Modules确保样式局部化：

.container {
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

.title {
  font-size: 24px;
  color: #333;
}

b. src/App.js
使用CSS Modules引入样式：

import React from 'react';
import styles from './App.module.css';

export default function App() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>动态加载的React微模块</h1>
      <p>当前时间：{new Date().toLocaleString()}</p>
    </div>
  );
}

c. src/index.js
暴露组件：

import React from 'react';
import App from './App';

export { App };

d. webpack.config.js
配置Webpack支持CSS Modules和UMD输出：

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'react-module.umd.js',
    library: 'reactMicroModule',
    libraryTarget: 'umd',
    globalObject: 'this'
  },
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react']
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true // 启用CSS Modules
            }
          }
        ]
      }
    ]
  }
};

e. package.json 构建命令

{
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "devDependencies": {
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "babel-loader": "^9.1.3",
    "@babel/core": "^7.23.2",
    "@babel/preset-react": "^7.23.2",
    "style-loader": "^3.3.3",
    "css-loader": "^6.8.1"
  }
}

3. 构建子应用

npm install
npm run build

生成dist/react-module.umd.js，将其复制到JSP项目的静态资源目录（如webapp/static/js）。

---

二、JSP主应用集成

1. JSP页面代码 (main.jsp)

    
    
    
    
    
    
    

    
    


    
    
JSP主应用
    
当前用户：<%= request.getUserPrincipal().getName() %>
    
    
    


    
    

---

三、样式隔离实现

1. React样式隔离

• 使用 CSS Modules 确保React组件的样式局部化，不会影响外部JSP样式。
• 使用 Shadow DOM 将React组件渲染到一个隔离的DOM树中，确保React样式不会泄漏到JSP页面。

2. JSP样式隔离

• JSP页面的样式通过普通