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

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

npm link

npm link lego-component

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

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

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 whoami
// 查看一些配置信息，尤其是 registry ，仓库的源
npm config ls
// 登录 npm 账号 ，除了用户名，密码，邮箱外 还需要填写一个验证码
npm login
// 发布包到 npm ，包名不能重复，必须是 npm 官方源
npm bublish

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

vue add unit-jest

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"
  },