小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

Rollup从0到1上手前端组件库开发 | 发布使用

上文回顾

通过上文的讲解, 我们目前已经完成了Vue组件的开发与HTML页面的调用, 接下来我们探索一下如何在 Vue工程化项目中使用我们开发的组件库~

本地引用

我们的本地项目如何引用我们本地的组件库呢?

通过 npm link 命令创建本地组件库连接

npm link npm 会在我们本地的全局 npm package 中做映射和链接

npm link (in package dir)
npm link [<@scope>/]<pkg>[@<version>]
alias: npm ln

示例

cd ~/projects/node-redis     # 进入本地包目录
npm link # 创建全局链接                     
cd ~/projects/node-blogger    # 进入其他包目录。
npm link redis               # 链接安装包

修改 package.json

将 main 改成 dist 目录下编译后的问题件

"name":"rollbear-libs", // 发布的包名~

"main": "dist/index"
 // 改为
 "main": "dist/rollbear.dev.js",

增加 files字段

表示哪些文件需要被上传到NPM

 "files": [
    "dist",
    "src"
  ],

执行 npm link

sudo npm link

删除npm link的包

cd /usr/local/lib/node_modules/
rm your-package-name

在我们的Vue项目中使用

npm link your-package-name

在 package.json 中加入你的组件库名字和版本号就可以使用啦~