前端單頁應用微服務化解決方案6 - 構建與部署

文章轉發自: alili.tech

微前端打包構建

微前端項目的打包,是有一些須要注意的點 以webpack爲例:

amd模塊

在以前的文章,咱們有提到咱們的加載器,是基於System.js來作的. 因此咱們微前端的模塊最終打包,是要符合模塊規範的. 咱們使用的是amd模塊規範來構建咱們的模塊.

指定基礎路徑

由於模塊打包後,調用模塊出口文件的,是模塊加載器. 爲了清晰的管理每一個模塊,而且正確的加載到咱們每個模塊的資源, 咱們給模塊的資源都指定一個publicPath.

下面給出一個簡單的 webpack 配置,這些配置我只是列出一些必要選項. 並非一個完整的webpack配置,後續我會提供完整的微前端的Demo,提供你們參考 這些配置都是基於 create-react-app 的配置作的修改. 只要明白了配置的意圖,明白咱們打包出來的最終是一個什麼樣的包, 無論打包工具之後怎麼變,技術棧怎麼變,最後都是能夠對接到微前端中來.

這裏給出 project.json 的內容,便於後面的配置文件的閱讀

// project.json
{
    "name": "name", //模塊名稱
    "path": "/project", //模塊url前綴
    "prefix": "/module-prefix/", //模塊文件路徑前綴
    "main": "/module-prefix/main.js", //模塊渲染出口文件
    "store": "/module-prefix/store.js",//模塊對外接口
    "base": true // 是否爲baseapp
  }
複製代碼

// 引入項目配置文件,也是前面說的 模塊加載器必要文件之一
const projectConfig = require('./project.json')

let config = {
  entry: {
    main: paths.appIndexJs, //出口文件,模塊加載器必要文件之一
    store: paths.store // 對外api的reducer文件,模塊加載器必要文件之一
  },
  output: {
    path: paths.appBuild,
    filename: '[name].js?n=[chunkhash:8]',
    chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
    publicPath: projectConfig.prefix, //在output中指定模塊配置好的 publicPath
    libraryTarget: 'amd', //對外輸出 amd模塊,便於 system.js加載
    library: projectConfig.name, //模塊的名稱
  },
  },
  module: {
    rules: [
      {
        oneOf: [
          {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
            // loader: 'happypack/loader?id=url',
            loaders: [{
              loader: require.resolve('url-loader'),
              options: {
                limit: 5000,
                name: 'static/media/[name].[hash:8].[ext]',
                publicPath: projectConfig.prefix, //咱們須要在靜態文件的loader加上publicPath
              },
            }]
          },
          {
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: 'happypack/loader?id=babel',
            options: {
                name: 'static/js/[name].[hash:8].[ext]',
                publicPath: projectConfig.prefix, //在靜態文件的loader加上publicPath
              },
          },
          {
            loader: require.resolve('file-loader'),
            exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
            options: {
              name: 'static/media/[name].[hash:8].[ext]',
              publicPath: projectConfig.prefix, //在靜態文件的loader加上publicPath
            },
          },
        ],
      },
    ],
  },
}

複製代碼

部署

前端單頁面的部署,無論怎麼自動化,工具怎麼變. 都是把打包好的靜態文件,放到服務器的正確位置下. 微前端的部署,是一個應用聚合的過程,咱們如何把一個個模塊最後接入到一個完整的項目中的呢?

微前端應用完整目錄

通常會放在一個nginx配置好的靜態目錄裏,或者是其餘web容器的一個靜態目錄. 看到這個目錄結構,你應該能理解爲何要額外的配置 publicPath 了吧.

├── index.html              // 首先瀏覽器會加載這個index.html,html裏面會引入一個bootstrap.js的文件
├── bootstrap.js            // 這個bootstrap.js是以前說的模塊加載器打包事後的代碼,
│                           // 模塊加載器會先加載 `project.config.js`,獲得全部模塊的配置.
│                           // 而後纔開始加載每一個項目中的main.js文件,註冊應用,注入store.js
│
├── project.config.js       // 這個文件存到是該項目的全部模塊的配置,是代碼自動生成的
│                           // 以前有提到過項目配置自動化,是這個項目中惟一動態的文件.
│                           // 目的是讓模塊的配置文件更新,或者新增新模塊的時候,模塊會自動掛載到項目中來
│                           // 他會遍歷每個模塊的project.json文件,取出內容,合併到一塊兒
│
├── projectA                // 模塊A目錄
│   ├── asset-manifest.json
│   ├── favicon.ico
│   ├── main.js             // 渲染用的出口文件
│   ├── manifest.json
│   ├── project.json        // 模塊的配置文件
│   ├── static
│   │   ├── js
│   │   │   ├── 0.86ae3ec3.chunk.js
│   │   └── media
│   │       └── logo.db0697c1.png
│   └── store.js            //對外輸出的store.js 文件
└── projectB                // 模塊B (重要文件的位置,與模塊A是一致的)
    ├── asset-manifest.json
    ├── main.js
    ├── manifest.json
    ├── project.json
    ├── static
    │   ├── js
    │   │   ├── 0.86ae3ec3.chunk.js
    │   └── media
    │       └── logo.db0697c1.png
    └── store.js
複製代碼

配置自動化

咱們每一個模塊都有上面所描述的配置文件,當咱們的項目多個模塊的時候,咱們須要把全部模塊的配置文件聚合起來. 我這裏也有寫一個腳本.

micro-auto-config

使用方法:

npm install micro-auto-config -g

# 在項目根目錄,用pm2啓動該腳本,即可啓動這個項目的配置自動化
pm2 start micro-auto-config --name 你的項目名稱-auto-config
複製代碼

這樣以後 project.config.js 就會自動生成,以及模塊變更以後也會從新生成.

未完待續 ...

相關文章

前端單頁應用微服務化解決方案1 - 思考

前端單頁應用微服務化解決方案2 - Single-SPA

前端單頁應用微服務化解決方案3 - 模塊加載器

前端單頁應用微服務化解決方案4 - 消息總線

前端單頁應用微服務化解決方案5 - 路由分發

前端單頁應用微服務化解決方案6 - 構建與部署

前端單頁應用微服務化解決方案7 - 靜態數據共享

前端單頁應用微服務化解決方案8 - 二次構建

Demo

前端微服務化 Micro Frontend Demo

微前端模塊加載器

微前端Base App示例源碼

微前端子項目示例源碼