[学习] npm 包的抽离思路

npm 包抽离思路

npm 包抽离和发布

在 elpis 的学习过程中, 这一个章节其实没有太多的内容可以描述, 那我们就来聊聊 npm 包的抽离和发布吧

当我们完成一个项目之后, 经常会在项目里看到 utils/tools/common 这样的文件夹或文件, 然后里面放了一些整个项目要用到的工具. 有些是和业务强相关的, 有些是和业务无关的通用方法, 那我们就可以将这些方法抽离出来, 单独发成一个 npm 包, 后续其他项目想使用就不需要来回复制代码了

代码示例

让我们来看个例子吧

// utils/index.js
export function sum(...args) {
  return args.reduce((a, b) => a + b, 0);
}

// businessSum(10, 1.5) // 1150
// 15块 + 1块5 = 1150分
// 假如我的业务就需要这么一个以元为输入单位, 以分为输出单位的方法
export function businessSum(a, b) {
  return sum(a, b) * 100;
}

对于这样一个文件来说, 我们有 sum 和 businessSum 两个方法

很容易我们就能看出来 sum 是通用方法, businessSum 是因为业务需要而定制化实现的需求

这时候我们就应该要有一个文件对这些方法进行整理

// index.js
export { sum } from './utils/index.js';

在这个文件中, 我们只导出了 sum 方法, 然后将这个文件作为 npm 包的入口文件使用现代的打包工具进行打包, 那由于打包工具默认有 tree shaking 的能力, 所以只有 sum 方法会打包进 npm 包, 而 businessSum 方法就不会打包进 npm 包

我们就给一个在外部使用的例子吧

import { sum, businessSum } from '<你发布的 npm 包名>';

console.log(typeof sum); // function
console.log(typeof businessSum); // undefined

上面是一个简单的例子, 但是实际上我们的项目中大部分方法都会因为埋点需求等污染到通用方法, 那这个时候我们可以把方法主体抽离成不可分割原子方法, 然后再重新组织成业务和通用的方法, 但是这种方法成本稍微有点高, 还要做代码重构, 所以我们也可以使用依赖打包工具的 tree shaking 能力结合环境变量来摇掉那些业务逻辑

// 改造前
function sum(...args) {
  try {
    return args.reduce((a, b) => a + b, 0);
  } catch {
    // 埋点
    logger.error('sum error', args);
  }
}

// 改造后
function sum(...args) {
  try {
    return args.reduce((a, b) => a + b, 0);
  } catch (e) {
    // 不是 npm 包构建模式
    if (!import.meta.env.PKG_BUILD) {
      // 埋点
      logger.error('sum error', args);
    }
    throw e;
  }
}

// 打包后
function sum(...args) {
  try {
    return args.reduce((a, b) => a + b, 0);
  } catch (e) {
    throw e;
  }
}

这样我们就可以不对函数进行拆分, 然后还能将业务代码和通用代码进行分离

对了, 我们还需要将打包命令进行以下调整

{
  "scripts": {
    "build:pkg": "cross-env PKG_BUILD=true npm run build"
  }
}

对于 elpis 来说发包应该有哪些内容

下面说的 elpis 指的是对三方公开的包

对于 elpis 这个项目生成框架来说, 我们需要输出以下内容

• 可执行的命令
• 文档 (示例, 使用说明等)
• 通用组件
• 部分方法

那我么需要的输入是用户扩展的页面和组件, 所以我们应该提供一个 config 文件来接收用户的输入