开源项目 Universe 的安装与使用指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00260/article/details/141085232

开源项目 Universe 的安装与使用指南

universeA collection of tools, plugins, and utilities for Module Federation 项目地址:https://gitcode.com/gh_mirrors/uni/universe

目录结构及介绍

在 module-federation/universe 项目中，典型的目录结构可能如下所示：

├── src               # 源代码存放位置
│   ├── components    # React 组件存放位置
│   ├── containers    # 容器组件存放位置
│   └── utils         # 工具函数存放位置
├── public            # 静态资源如图片等存放位置
│   └── index.html    # 主入口HTML文件
├── .gitignore        # Git忽略规则文件
├── package.json      # Node.js项目的元数据文件
├── webpack.config.js # Webpack配置文件
└── README.md         # 项目说明文档

src/ 包含应用程序的主要逻辑和组件。
- components/ 存放独立可重用的React组件。
- containers/ 是高级容器组件，它们负责管理状态并提供数据给下层的components。
- utils/ 存储工具函数和库。
public/ 包括静态资源和主页面入口文件index.html。

启动文件介绍

主要的启动点是package.json中的scripts对象。这里定义了项目的各种构建和运行脚本。例如：

{
  "scripts": {
    "start": "webpack serve --config webpack.config.js",
    "build": "webpack"
  }
}

start 脚本

start 脚本用于启动开发服务器，通常使用Webpack Dev Server进行实时编译和热更新，方便开发者调试。

build 脚本

build 脚本用于将应用打包成生产环境可用的版本。这个过程通常包括压缩和优化代码。

配置文件介绍

关键的配置文件之一是webpack.config.js。这是一个JavaScript文件，用于指定Webpack如何处理项目。其配置可能类似以下：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 9000,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
  ],
};

mode: 设置Webpack工作模式，可以是development, production或none。
entry: 入口文件路径。
devServer: Webpack Dev Server的配置。
- static: 指定静态文件目录。
- compress: 是否启用压缩。
- port: 指定服务器端口。
plugins: 插件列表，这里是HtmlWebpackPlugin用于自动创建HTML文件并将构建结果作为script标签注入其中。