引言

大家好~

周末时间，探究下webpack5提供的新能力Federation, 本文主要使用这个功从0-1搭建微前端的环境。在文末会针对微前端进行一定的分析。

目前在社区有很多关于微前端的介绍，包括沙箱环境等，微前端的价值、缺点等等。在文末会列出几个链接，如果感兴趣的可以了解下，这里就不在多赘述。

Webpack Federation

Federation是webpack5提供的新能力，官网介绍: “多个独立的构建可以组成一个应用程序，这些独立的构建之间不应该存在依赖关系，因此可以单独开发和部署它们。”

主要的api

const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      shared: {},  // 要共享的依赖库
      library: {}, // 当前要导出模块的定义
      remotes：{}, // 其他子的定义
      filename: '', // 导出的文件名
      exposes: {} // 导出的模块
    }),
  ],
};
复制代码

开始

在一个项目里，分了很多子模块和一个公用的基座，本文为了方便将所有的项目都放在一个文件里，所以自然而然就选择了现在比较热门的包管理工具 lerna

项目初始化

mkdir federation-demo
cd federation-demo & yarn init
yarn add lerna
lerna init
复制代码

项目初始化完后，就该写对的运行命令了

  "scripts": {
    "init": "lerna init",
    "build": "lerna run --parallel build",
    "serve": "lerna run --parallel serve"
  }
复制代码

项目的目录结构

federation-demo/
  packages/
    app1（基座）
    app2 （子应用）
  package.json
  lerna.json
复制代码

搭建基座(app1)

主要以react为主，搭建简单的应用。

app1目录结构

app1/
  public
    index.html
  src
    app.js
    index.js
  webpack.config.js
  package.json
复制代码

为了方便调试，这里用serve来启动一个静态的服务器，package.json相关的命令如下：

  "scripts": {
    "start": "webpack serve",
    "build": "webpack --mode development",
    "serve": "serve dist -p 8888"
  }
复制代码

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>项目一</title>
    <script src="xxxxx"></script><!-- 远端暴露的地址，子应用的路径 -->
</head>
<body>
    <h1>项目一</h1>

    <div id="app"></div>
</body>
</html>
复制代码

scr/app.js

import React from 'react'
const { lazy, Suspense} = React

const App2 = lazy(() => import('app2/App2')) // 子应用

const App = () => (
    <div>
        <h1>容器应用</h1>

        <Suspense fallback="loading">
            <App2 />
        </Suspense>
    </div>
)

export default App
复制代码

src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'

ReactDOM.render(<App />, document.getElementById('app'))
复制代码

上面主要在搭建一个简单的react页面应用，接下来的重头戏就是webpack.config.js的配置了，主要借助Federation的能力，进行开发。

因为是手动搭建的目录，react的编译就需要借助babel，已经一些必要的依赖库，比如webpack等

yarn add babel-loader @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli -D
复制代码

上面装了一些必要的工具和库，但是为了方便，还需要装一个库，方便来启动服务，进行测试

yarn add serve
复制代码

webapck.config.js配置(这里会忽略一些配置，比如编译react的配置，相信大家都已经烂熟于心了)。下面是主要的配置：

module.exports = {
    plugins: [
        new ModuleFederationPlugin({
            name: 'app1',
            library: { type: 'var', name: 'app1' },
            remotes: { app2: 'app2' },
            shared: {
                react: {
                    singleton: true,
                    eager: true,
                },
                'react-dom': {
                    singleton: true,
                    eager: true,
                }
            },
        }),
    ]
}
复制代码

解析：

library: 主要是定义app1, 将app1以全局变量的方式挂载
name: 这个分享库的名称
remotes: 远端的子项目
shared: 需要共享的依赖(对应的参数可以参考官网，文末链接)

到这里基本的基座环境已经写的差不都了, 接下来搭建子应用。

子应用(app2)

其实子应用和基座差不多，我们直接复制一份，然后稍作修改就行。

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目二</title>
</head>
<body>
    <h1>项目二</h1>

    <div id="app"></div>
</body>
</html>
复制代码

src/app.js

import React from 'react'
import Button from './button'

const App = () => (
    <div>
        <h2>子应用</h2>

        <Button />
    </div>    
)

export default App
复制代码

src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'

ReactDOM.render(<App />, document.getElementById('app'))
复制代码

为了体现组件的灵活应用，我们这里还将为app2拆除一个按钮组件
src/button.js

import React from 'react'

const Button = () => <button>我是子应用的按钮</button>

export default Button
复制代码

重点来了，就是我们的webpack.config.js的配置，这里的配置和app1的配置有点区别，如下：

module.exports = {
    plugins: [
        new ModuleFederationPlugin({
            name: 'app2',
            library: {
                type: 'var',
                name: 'app2'
            },
            exposes: {
                './App2': './src/app',  // 要暴露的组件
                './Button': './src/button'
            },
            filename: 'remote.js',  //往外暴露的文件名
        }),
    ],
}
复制代码