班级网站素材下载,鞋材 技术支持 东莞网站建设,做招牌的广告公司,企业网关微前端即是由一个主应用来集成多个微应用#xff08;可以不区分技术栈进行集成#xff09; 下面是使用微前端框架之一 MicroApp 对 react微应用 的详细流程
第一步
创建主应用my-mj-app 利用脚手架 npx create-react-app my-mj-app 快速创建 安装 npm install --save rea…微前端即是由一个主应用来集成多个微应用可以不区分技术栈进行集成 下面是使用微前端框架之一 MicroApp 对 react微应用 的详细流程
第一步
创建主应用my-mj-app 利用脚手架 npx create-react-app my-mj-app 快速创建 安装 npm install --save react-router-dom 路由 npm run start 启动 localhost:3000
第二步
创建微应用reactapp1 利用webpack构建
//初始化项目
npm init -y//安装核心库
npm install react react-dom
//webpack打包工具
npm install --save-dev webpack webpack-cli webpack-dev-server
//Babel用于将 JSX 和 ES6 代码转换成兼容浏览器的 JavaScript 代码。
npm install --save-dev babel/core babel-loader babel/preset-env babel/preset-react
//HTML 插件自动生成 HTML 文件并自动引入打包后的 JavaScript 文件。
npm install --save-dev html-webpack-plugin
配置Babel 根目录下创建一个 .babelrc 文件
{presets: [babel/preset-env, // 转换 ES6[// 转换 JSXbabel/preset-react,{runtime: automatic // 使用 React 17 的 JSX 转换方式}]]
}
配置Webpack 根目录下创建一个 webpack.config.js
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {entry: ./src/index.jsx, // 项目入口文件output: {filename: bundle.js, // 输出的文件名path: path.resolve(__dirname, dist), // 输出的目录},resolve: {extensions: [.js, .jsx] // 引入文件时不用写后缀},module: {rules: [{test: /\.jsx?$/,exclude: /node_modules/,use: {loader: babel-loader}}]},plugins: [new HtmlWebpackPlugin({template: ./src/index.html // 模板文件})]
};创建React组件 在 src 目录下创建 index.jsx 和 App.jsx src/index.jsx
import { createRoot } from react-dom/client;
import App from ./App;const container document.getElementById(root);
const root createRoot(container);
root.render(App /);src/App.jsx
function App() {return divHello, React!/div;
}export default App;
src/index.html
!DOCTYPE html
htmlheadtitleReact App/title/headbodydiv idroot/div/body
/html修改package.json
scripts: {start: webpack serve --open --mode development,build: webpack --mode production
}npm start
npm run build
至此完成了一个基础的 React Webpack 项目的搭建 第三步
有了主应用和子应用可以有多个不同技术栈应用开始接入MicroApp微服务
主应用配置 安装依赖 npm i micro-zoe/micro-app --save 初始化micro-app
// index.js
import microApp from micro-zoe/micro-app
microApp.start()
嵌入第一个子应用
function AppChild(){return divh1我是主应用/h1h1子应用/h1micro-app namereactapp1 urlhttp://localhost:8080//micro-app/div
}
export default AppChild;子应用配置 设置跨域支持
//webpack.config.jsdevServer: {headers: {Access-Control-Allow-Origin: *,Access-Control-Allow-Methods: GET, POST, PUT, DELETE, PATCH, OPTIONS,Access-Control-Allow-Headers: X-Requested-With, content-type, Authorization,},},注册卸载函数
// index.js
window.unmount () {ReactDOM.unmountComponentAtNode(document.getElementById(root))
}
第四步
下面利用craco嵌入第二个子应用 还是先创建微应用reactapp2 利用脚手架 npx create-react-app reactapp2 快速创建 利用cracoCreate React App Configuration Override配置webpack craco 是一个用于扩展 Create React AppCRA的工具CRA 是一个用于快速搭建 React 应用的脚手架工具。CRA 提供了一个简单的项目结构和配置使得开发者可以快速开始一个 React 项目的开发。 然而 CRA 的配置是被隐藏的开发者无法对其进行自定义和扩展。这就是 craco 出现的原因。cracoCreate React App Configuration Override 允许开发者覆盖和扩展 CRA 的配置以满足更复杂的项目需求。 使用 craco开发者可以在不弹出 CRA 的配置的情况下修改 webpack 配置、babel 配置、ESLint 配置、devServer配置 等。craco 提供了一种简单的方式来覆盖 CRA 的默认配置同时保留了 CRA 的简洁性和易用性。 通过 craco开发者可以使用自定义的 webpack 插件、babel 插件 和 其他工具以满足项目的特定需求。例如可以添加自定义的 webpack loader配置自定义的 babel preset 或 plugin或者修改 webpack 的输出路径等。 npm i -D craco/craco 修改 package.json 文件中 scripts 配置的 react-scripts 替换为 craco
scripts: {
- // start: react-scripts start,
- // build: react-scripts build,
- // test: react-scripts test,start: craco start,build: craco build,test: craco test,eject: react-scripts eject
}
根目录创建 craco.config.js 配置文件可以理解为 Vue 项目中外抛的 vue.config.js。
const path require(path);
const { CracoAliasPlugin } require(react-app-rewire-alias);module.exports {// 跨域配置devServer: {port: 8090,proxy: {/api: {target: https://localhost:8080,changeOrigin: true,pathRewrite: {^/api: }}},headers: {Access-Control-Allow-Origin: *,Access-Control-Allow-Methods: GET, POST, PUT, DELETE, PATCH, OPTIONS,Access-Control-Allow-Headers: X-Requested-With, content-type, Authorization,},// ...},// webpack 配置webpack: {// 配置内容},// 配置别名plugins: [// 配置内容],
};更改主应用配置 嵌入第二个子应用
function AppChild(){return divh1我是主应用/h1h1第一个子应用/h1micro-app namereactapp1 urlhttp://localhost:8080//micro-apph1第二个子应用/h1micro-app namereactapp2 urlhttp://localhost:8090//micro-app/div
}
export default AppChild;
集成后效果图如下 至此利用MicroApp集成主应用微应用集成完毕更多应用配置可以查询官方文档 MicroApp官网 https://micro-zoe.github.io/doc/zh/ craco 中文文档 https://developer.aliyun.com/article/1397201
