组件库打包---答疑篇

九月 27, 2021 本文共计： 1.2k 字预计阅读时长： 4分钟

作为九月的收尾文章，分享一下我已经应用于若干生产项目的组件库打包方案以及难题解决～

以下的每个问题点，都以Topic的形式展开讲述。

组件库的样式怎么解决？

其实在之前的文章中有分享过组件库的样式解决方案，但是还是有一些问题的，不过经历了一个多星期的钻研尝试，总算是找到了样式解决方案的最优解～

怎么处理第三方样式？

拿目前的antd样式来看，为了避免打包过程中产生额外的三方库样式赘余，所以我们使用按需&peer依赖方案

具体对应到rollup配置里，我们可能会这么做：

const external = [
    'react',
    'react/jsx-runtime',
    'antd',
];

export default {
    // 省略若干配置
    external,
    // 省略若干配置
}

其次，对应到babel.config中，我们可能会这么做：

module.exports = {
    presets: [
        ['@babel/preset-env', { loose: true }],
        [
            '@babel/preset-react',
            {
                runtime: 'automatic',
            },
        ],
    ],
    plugins: [
        '@babel/plugin-transform-runtime',
        // 下面的配置是要点！
        [
            'import',
            {
                libraryName: 'antd',
                libraryDirectory: 'es',
                style: true,
            },
        ],
    ],
};

告诉工具，我们的打包配置是按需的，其次，我们的样式走的是less文件。为了保证不和项目中的antd css产生冲突，那么我们同样需要在项目中做相同的处理

项目中的配置

{
  "babel": {
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": true
        }
      ]
    ],
    "presets": [
      "react-app"
    ]
  }
}

当然这里是需要借助webpack的less loader做一些事情的：

需要在 less options中添加如下配置：

{
    lessOptions: {
        javascriptEnabled: true
    }
}

保证和组件库的配置依赖保持一致，让组件库的按需es能够找得到项目中的按需样式，这样就可以做到样式不丢失。

多个组件包的管理怎么处理

工具

最常见的使用工具，当然是lerna了，我们可以配置lerna。

lerna的配置详细规则，这里不再做过多的阐述，重点我们去解决下面的问题：

lerna管理多个包，怎么处理包的碰撞log，也就是不相关的包会触发版本升级

# **Note:** Version bump only for package xxx

上面的内容就是包版本发生碰撞之后的changelog内容，怎么解决呢？

我个人想了一个比较好的方案：

解决痛点：lerna只能一次性控制所有的包打包构建，那么单独精确控制呢？

思路：提供可视化的打包选择shell，提供更加语意化的commit信息

第一步

解析命令行：

const { Command } = require('commander');

program.parse(process.argv);

第二步

获取lerna管理项目的所有包信息：

const shell = require('shelljs');

const res = shell.exec(` lerna ls --json`, { silent: true });

上面的silent的意思是，控制命令行执行不输出语句，因为我们更希望我们的shell是干净的。

第三步

命令行答询

const inquirer = require('inquirer');

inquirer
    .prompt([
        {
            type: 'checkbox',
            message: 'Please select your want publish packages',
            name: 'packages',
            choices: [new inquirer.Separator(' = Lerna All Packages = '), ...JSON.parse(res.stdout)],
        },
    ])
    .catch(error => {
        if (error.isTtyError) {
            // Prompt couldn't be rendered in the current environment
        } else {
            // Something else went wrong
        }
    });

上面的文档，其实在人家github仓库中已经给了案例了，这里做一个传送门：

传送门 : https://github.com/SBoudrias/Inquirer.js/tree/master/packages/inquirer/examples

选择自己适合的方案去做。

第四步

借助lerna命令去遍历精确打包；

const inquirer = require('inquirer');

inquirer
    .prompt([
        {
            type: 'checkbox',
            message: 'Please select your want publish packages',
            name: 'packages',
            choices: [new inquirer.Separator(' = Lerna All Packages = '), ...JSON.parse(res.stdout)],
        },
    ])
    .then(answers => {
        answers.packages?.forEach(item => {
            shell.exec(`lerna run --scope ${item} build`);
        });
    })

其实lerna的官方文档里有说明lerna run --scope [包名] [script 命令] 可以做到精确控制某个包的命令执行，那我们遍历就可以做一个宏观并行处理。

第五步

借助commitizen控制发布信息的规范化

const path = require('path');

const starderedCommmit = () => {
    shell.exec(`git add .`);
    const bootstrap = require('commitizen/dist/cli/git-cz').bootstrap;
    bootstrap({
        cliPath: path.join(__dirname, '../node_modules/commitizen'),
        config: {
            path: 'cz-conventional-changelog',
        },
    });
};