【架构师（第三十六篇）】业务组件库开发之发布到 NPM

组件库 package.json 配置

添加两种规范以及 ts 的入口文件

  "main": "dist/lego-component.umd.js",
  "module": "dist/lego-component.esm.js",
  "types": "dist/index.d.ts",

使用 npm link 本地测试组件库

先进入需要被本地 link 的目录中，执行

npm link

然后进入到使用这个库的目录中，执行

npm link lego-component

引入本地组件库

import LegoComponents from 'lego-Component';
app.use(LegoComponents);

结果发现这一行 Ts 报错了，原因是 vue 的版本不一致，真实的场景下不会出现这个问题，因为真实情况下组件库用的是上级的依赖。

解决这个问题，可以把组件库的 vue 版本 link 成为别的项目的版本。执行

npm link ../lego-fe/node_modules/vue

这样两个项目就使用了同样的版本，错误也就消失了。

Rollup 插件开发的简单原理

Rollup 插件的作用就是将各种各样的文件转化成 Rollup 认识的 esm 的代码。

import { dataToEsm } from '@rollup/pluginutils'

// 插件就是一个返回特定对象的函数
function exPlugin() {
  return {
    name: "my-plugin",
    buildStart(options) {
      console.log('🚀🚀 buildStart ~ options', options);
    },
    load(id) {
      console.log('🚀🚀 load ~ id', id);
      return null
    },
    transform(code, id) {
      console.log('🚀🚀 transform ~ id', id);
      console.log('🚀🚀 transform ~ code', code);
      if (id.slice(-5) !== '.json') {
        return null
      }
      try {
        const parsed = JSON.parse(code)
        const afterCode = dataToEsm(parsed)
        console.log('🚀🚀 transform ~ afterCode', afterCode);
        return {
          code: afterCode
        }
      } catch (error) {
        console.log('🚀🚀 ~ error', error);

      }
    },
    buildEnd(error) {
      console.log('🚀🚀 buildEnd ~ error', error);
    }
  }
}

export default {
  input: "package.json",
  output: {
    name,
    file: file('esm'),
    format: "es"
  },
  plugins: [
    exPlugin()
  ],
}

npm 简介和 package.json 的设置

npm 的主要功能

从 npm 下载别人编写的第三方包到本地，比如 vue
从 npm 下载并安装别人编写的命令行工具到本地，比如 vue-cli
将自己编写的包或命令行工具上传到 npm 供别人使用

npm 常用命令

// 查看登录状态 没有登录就会提示错误 登录了就会显示用户名
npm whoami
// 查看一些配置信息，尤其是 registry ，仓库的源
npm config ls
// 登录 npm 账号 ，除了用户名，密码，邮箱外 还需要填写一个验证码
npm login
// 发布包到 npm ，包名不能重复，必须是 npm 官方源
npm bublish

语义化版本 semver

主版本号：当你做了不向下兼容的 API 修改
次版本号：当你做了向下兼容的功能新增
修订号：当你做了向下兼容的问题修正

上传文件 files

指示 npm publish 的时候需要上传的内容
默认忽略掉 .gitignore 中的文件，上传其余文件
无论怎样配置 package.json/README.md/CHANGELOG.md/LICENSE 都会被包含在其中

使用 npm publish 发布业务组件库

发布前打包

使用 prepublishOnly 钩子，让组件库在发布之前进行一次打包，就不用我们手动执行 npm run build 了。

  "scripts": {
    "prepublishOnly": "npm run build"
  },

发布完成

这样就是发布完成了。

给业务组件库添加测试用例

添加单元测试工具

vue add unit-jest

LText.spec.ts

import { shallowMount } from '@vue/test-utils';
import LText from '@/components/LText';
import { textDefaultProps } from '../../src/defaultProps';

describe('LText.vue', () => {
  it.only('default LText render', async () => {
    // 传入组件的属性
    const msg = 'test';
    const props = {
      ...textDefaultProps,
      text: msg,
    };
    // 获取组件
    const wrapper = shallowMount(LText, { props });
    // 文本正确
    expect(wrapper.text()).toBe(msg);
    // 标签正确
    expect(wrapper.element.tagName).toBe('DIV');
    const style = wrapper.attributes().style;
    // 包含指定类名
    expect(style.includes('font-size')).toBeTruthy();
    // 不包含指定类名
    expect(style.includes('actionType')).toBeFalsy();
  });
});

发布前检查代码质量和测试结果

  "scripts": {
    "serve": "vue-cli-service serve",
    "clean": "rimraf ./dist",
    "build": "npm run clean && npm run build:esm && npm run build:umd",
    "build:esm": "rollup --config rollup.esm.config.js",
    "build:umd": "rollup --config rollup.umd.config.js",
    "test:watch": "vue-cli-service test:unit --watch",
    "test": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint --max-warnings 5",
    "prepublishOnly": "npm run lint && npm run test && npm run build"
  },

【架构师（第三十六篇）】 业务组件库开发之发布到 NPM