【架构师（第三十六篇）】 业务组件库开发之发布到 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-jestLText.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"
},举报
腾讯云开发者
