wpm

# 使用wpm组件库

配置指南

  • 微盟微前端项目不改业务代码切换wpm组件库指南
  1. 配置webpack插件
yarn add import-wpm-webpack-plugin -D
1

微前端脚手架webpack配置文件

  • saas-fe-kraken-react-kit 脚手架对应配置文件 kit.config.js
  • sparrow-kraken-ng-vue-kit 脚手架对应配置文件 webpack.config.js
const ImportWpm = require("import-wpm-webpack-plugin")
const packageJson = require("./package.json")

module.exports = {
  plugins: [
    new ImportWpm({
      init: {
        env: "online" || "qa",
        // 运行时, 生效于所有运行时的代码, 生效于所有依赖（包括间接依赖）
        // 通常用于设置依赖信息, 例如 vue: "vue@0.1?xxx=1", react@0.1: "react@1.0"
        map: {
          "@core-klein/basic-multiple": `@core-klein/basic-multiple?cssScope=.${packageJson.name}`,
          "@wemo-ui/klein": `@wemo-ui/klein?cssScope=.${packageJson.name}`,
          "@core-klein/container": `@core-klein/container?cssScope=.${packageJson.name}`,
        },
      },
      alias: {
        react: "wpm:react",
        "react-dom": "wpm:react-dom",
        "@wemo-ui/klein": "wpm:@wemo-ui/klein",
        "@core-klein/container": "wpm:@core-klein/container",
      },
      singleWarningPattern: /\.[jt]sx?$/
    })
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  1. 删除babel-plugin-import（第4行）
// babel.config.js
module.exports = {
  plugins: [
    // ["import", {
    //   libraryName: "@wemo-ui/klein",
    //   libraryDirectory: "es",
    //   style: true,
    // }, "@wemo-ui/klein"],
  ],
  sourceType: "unambiguous",
}
1
2
3
4
5
6
7
8
9
10
11
  1. 使用 wpmjs/$/@core-klein/basic-multiple (opens new window) 代替 @core-klein/basic

← 底层 →