react项目搭建（不使用脚手架）
技术选型
UI构建语言：React V17.0.2
CSS: Less
展示组件库：Ant Design
状态管理：Mobx + Mobx State Tree(MST)
路由管理：React Router
脚手架：不使用脚手架
Http通讯工具：Axios
打包工具：Webpack 5
组件管理工具：Bit.dev
包管理工具：Yarn
运行环境：NodeJS V14 +
微前端方案：Webpack模块联邦
组件间通讯方案：Pub Sub模式（事件发布订阅），以window为exchange交换区，事件全部发送window,接收方从window订阅
项目结构
- demo - src - components // 公用组件 - core // 核心代码 - mobx // mobx状态管理 - pages // 业务逻辑页面 - routes // 路由 - service // http请求 - index.jsx // 项目入口文件 - index.html // 项目模版 - package.json - webpack.config.js - .babelrc //babel配置文件
初始化yarn
yarn init
添加依赖包
yarn add [package]yarn add [package]@[version]yarn add [package]@[tag]
将依赖项添加到不同依赖项类别中
分别添加到 devDependencies、peerDependencies 和 optionalDependencies 类别中：
yarn add [package] --dev yarn add [package] --peer yarn add [package] --optional
升级依赖包
yarn upgrade [package] yarn upgrade [package]@[version] yarn upgrade [package]@[tag]
移除依赖包
yarn remove [package]
安装项目的全部依赖
yarn 或者 yarn install
安装webpack
yarn add webpack webpack-cli --dev
配置webpack.config.js文件
const path = require("path");function resolve(dir) {
console.log(path.join(__dirname, '..', dir));
return path.join(__dirname, '..', dir);}module.exports = {
entry: "./src/index.jsx",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
alias: {
"@": resolve('src')
}
},}// entry 是入口文件// output 是编译后文件// __dirname node.js全局变量 代表当前文件所在文件夹的完整路径// path.resolve 返回一个路径 __dirname+'/dist'// resolve解析模块路径 extensions指定要解析的文件扩展名(引入文件不需要加后缀) alias模块路径别名配置开发应用服务器
//正常情况下，我们需要以应用服务器打开我们的网页，webpack-dev-server提供了一个简单的web服务器，并且能够实时重新加载. //首先需要安装webpack-dev-serveryarn add webpack-dev-server --dev//接下来让我们的服务器跑起来，在package.json配置如下的命令脚本："scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production --config ./webpack.config.js"
},安装其他webpack的插件
//自动创建html文件 html-webpack-pluginyarn add html-webpack-plugin --dev//清除无用文件 clean-webpack-plugin(在每次编译之前把上一次打包的文件清除)yarn add clean-webpack-plugin --dev//一堆样式编译loader插件//less-loader 用来编译less文件//style-loader和css-loader 是用来编译css文件
完善webpack.config.js
const path = require("path");const HTMLWebpackPlugin = require("html-webpack-plugin");const { CleanWebpackPlugin } = require("clean-webpack-plugin");function resolve(dir) {
console.log(path.join(__dirname, '..', dir));
return path.join(__dirname, '..', dir);}module.exports = {
entry: "./src/index.jsx",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
alias: {
"@": resolve('src')
}
},
module: {
rules: [
{
test: /\.jsx?$/,
use: ['babel-loader'],
exclude: /node_modules/,
},
{
test: /\.html$/,
use: ['html-loader'],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
}
],
},
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
template: 'index.html',
inject: true, // 所有js脚本放于body之后
minify: {
removeComments: true, // 删除注释
collapseWhitespace: true, // 折叠空白
removeAttributeQuotes: true // 去除属性引用
}
})
],
devServer: {
hot: true,
port: 8000,
proxy: {
'/api': {
target: 'http://xxxxxx:81/',
changeOrigin: true,
pathRewrite: { '^/api': '/api' }
},
}
},}babel插件
1. babel-loader：文件处理器，加载js文件2. @babel/core：最新的版本，之前是babel-core，是babel的核心功能3. @babel/preset-env：也是最新的版本，之前是babel-preset-env。因为webpack不能识别es6以上，所以需要这个插件来转换es54. @babel/preset-react：也是最新的版本，之前是babel-preset-react，用来转换react的语法5. @babel/plugin-transform-runtime 在转换 ES2015 语法为 ECMAScript 5 的语法时，babel 会需要一些辅助函数，例如 _extend。
babel 默认会将这些辅助函数内联到每一个 js 文件里，这样文件多的时候，项目就会很大。
所以 babel 提供了 transform-runtime 来将这些辅助函数“搬”到一个单独的模块 babel-runtime 中，这样做能减小项目文件的大小。
添加babel配置文件
在根目录下添加文件 .babelrc{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-transform-runtime"]}//如果你使用 Babel 和 React 17，你可能需要在配置中添加 "runtime": "automatic",否则会报Uncaught ReferenceError: React is not defined{"presets": ["@babel/preset-env",["@babel/preset-react", {"runtime":"automatic"}]]}webpack5 模块联邦的使用ModuleFederationPlugin
// 导入模块联邦插件const { ModuleFederationPlugin } = require('webpack').container;// app1模块webpack.config.js配置plugins: [
new ModuleFederationPlugin({
// library: { type: 'var', name: 'colibri_protal' }, 声明此属性需CND方式引入
// 对外提供的打包后的文件名（引入时使用）
filename: 'app1.js',
// 当前应用模块名称
name: 'app1',
// 暴露模块
exposes: {
'./Counter': './src/components/Counter',
},
// shared: ["react", "react-dom", "react-router-dom"]
})],// app2模块webpack.config.js配置plugins: [
new ModuleFederationPlugin({
// library: { type: 'var', name: 'colibri_order' },
// 导入模块
remotes: {
// 导入后给模块起个别名：“微应用名称@地址/导出的文件名”
app1: 'app1@http://localhost:8000/app1.js'
// app1: 'app1' library方式导入，需cnd方式引入（<script src="http://localhost:8000/app1.js"></script>）
},
// 对外提供的打包后的文件名（引入时使用）
filename: 'app2.js',
// 应用名称，当前模块自己的名字
name: 'app2',
// shared: ["react", "react-dom", "react-router-dom"],
})],// app2模块引入app1模块暴露模块import React, { useState, useEffect } from 'react';import AboutRequest from "../service/AboutRequest";import appStore from '../mobx/appStore';import Counter from 'app1/Counter'; // 引入app1模块暴露模块export default function About() {
const [counter, setCounter] = useState(0);
const [count, setCount] = useState(0);
const getRes = async () => {
try {
let res = await AboutRequest.openPaymentService('18435201562');
console.log(res);
} catch (error) {
console.log(error);
}
}
useEffect(() => {
getRes()
}, [])
return (
<main style={{ padding: '1rem 0' }} onClick={() => {
appStore.addCount();
setCounter(appStore.counter)
}}>
<h2>Expenses</h2>
{counter}
<Counter
count={count}
onIncrement={() => setCount(count + 1)}
onDecrement={() => setCount(count - 1)}
/>
</main>
);}// 配置：shared// 除了前面提到的模块引入和模块暴露相关的配置外，还有个 shared 配置，主要是用来避免项目出现多个公共依赖。// 例如，我们当前的项目 app2，已经引入了一个 react/react-dom，而项目 app1 暴露的Counter组件也依赖了 react/react-dom。如果不解决这个问题，项目 app2 就会加载两个 react 库。// remotes的代码自己不打包，类似external，例如app1/Counter就是加载app1打包的代码// shared的代码自己是有打包的// 存在的问题// 直接引用报错 Uncaught TypeError: Cannot read property 'call' of undefined// 解决办法// 增加bootstrap.jsx 通过 index.jsx 异步加载页面//主要原因是 remote 暴露的 js 文件需要优先加载，如果 bootstrap.jsx 不是一个异步逻辑，在 import 暴露的组件 的时候，会依赖 app1 的 app1.js，如果直接在 index.jsx 执行，app1 的 app1.js 根本没有加载，所以会有问题// index.jsx import('./bootstrap');// bootstrap.jsximport React from "react";import ReactDOM from "react-dom";import { BrowserRouter as Router, Routes, Route, HashRouter } from "react-router-dom";import { Provider } from "mobx-react";import appStore from "./mobx/appStore";import routes from "./routes/index";ReactDOM.render(
<Provider store={appStore}>
<HashRouter>
<Routes>
{routes.map((item, index) => (
<Route key={index} path={item.path} element={item.component} />
))}
<Route
path="*"
element={
<main style={{ padding: '1rem' }}>
<p>There's nothing here!</p>
</main>
}
/>
</Routes>
</HashRouter>
</Provider>,
document.getElementById('colibri-app'))
作者：刺猬丶
链接：https://www.jianshu.com/p/f71d933604f2