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

---

组件库 package.json 配置

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

代码语言：javascript复制

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

使用 npm link 本地测试组件库

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

代码语言：javascript复制

npm link

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

代码语言：javascript复制

npm link lego-component

引入本地组件库

代码语言：javascript复制

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

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

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

代码语言：javascript复制

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

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

Rollup 插件开发的简单原理

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

代码语言：javascript复制

import { dataToEsm } from '@rollup/pluginutils'

// 插件就是一个返回特定对象的函数
function exPlugin() {
  return {
    name: "my-plugin",
    buildStart(options) {
      console.log('


	

npm vue.js json javascript rollup.js 


	




	
 0 人点赞