使用vue-sfc-rollup工具让你在npm上快速发包

本文主要是使用 vue-sfc-rollup 工具，去将我们封装的 vue 组件，发到 npm 上，以便于组件共享。

就 npm 发包而言，虽然工具有很多，但是 vue-sfc-rollup 是一个轻量级的工具，能够快速完成发包需求。

vue-sfc-rollup 介绍

官话介绍：

vue-sfc-rollup is a CLI templating utility that scaffolds a minimal setup for compiling a Vue Single File Component (SFC) – or library of multiple SFCs – into a form ready to share via npm. It doesn’t assume any particular flavor of CSS or docs generator, so you can use what you’re already used to. It’s the fastest way to produce npm-ready vue components!

通俗解释说明：

vue-sfc-rollup 是一个脚手架模板工具，在 vue 语法中生产，制作，发布 npm 包，是最快的方法。

• NPM 包地址：传送门
• GitHub 地址：传送门

步骤记录

一、准备好要发布的组件

假设我有一个组件，名字叫做myStar，就是一个盒子中放置三颗星星，长相如下图：

代码如下：

<template>
  <div class="myStarWrap">
    <span class="starItem">✡️</span>
    <span class="starItem">⭐</span>
    <span class="starItem">🔯</span>
  </div>
</template>

<script>
export default { name: "myStar" };
</script>

<style scoped>
.myStarWrap {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  width: 150px;
  height: auto;
  padding: 4px;
  padding-bottom: 8px;
  background-color: #e9e9e9;
  border: 1px solid #666666;
}
/* 悬浮放大 */
.myStarWrap .starItem {
  font-size: 32px;
  cursor: zoom-in;
  transition: all 0.36s;
}
.myStarWrap .starItem:hover {
  transform: scale(1.2);
}
</style>

我现在准备把这个代码发到 npm 上面，使用vue-sfc-rollup工具。

二、全局安装 vue-sfc-rollup 并初始化项目

首先，我在桌面新建一个叫做 npm 的文件夹（名字无所谓），在此文件夹中进行操作。然后双击打开文件夹，进行 cmd 命令行操作。

在地址栏输入命令操作：

1. 全局安装

npm install -g vue-sfc-rollup

2. 安装成功后，初始化项目

sfc-init

具体操作，请仔细看下图：

按上面额步骤操作下来，工程文件夹就有东西了，然后使用 vscode 打开，注意目录层级结构，请仔细看下图：

三、将我们提前准备好的真正组件代码做替换即可

我们只需要替换上图中的 my-star.vue 文件即可。

当然，这里大家可以安装依赖包，并执行 npm run serve 跑起来，看看架子给到的默认 my-star 文件内容啥样子的。这里笔者也截个图，如下：

替换代码，并执行 npm run build 打包：

四、注意 package.json 的包名

注意，要小写，不能驼峰！

注意，这里改成 "name": "mystar" 即可。

即发布前检查一下，也可以添点东西，自己看情况为之。

五、登录 npm，并发布包

注意，这里的登录 npm，不是登录 cnpm，所以如果大家使用的是 cnpm 要切回 npm 再去登录。

npm config set registry https://registry.npmjs.org/

发的包，注意不要和 npm 上已经有的包重名了，要不然提交不上去的。

就像 git 要登录以后提交代码，npm 也要登录以后才能发包，大家一定要提前注册好 npm 的账号，并用自己的账号登录发布 publish，如下图

npm login 登录

npm publish 发包

六、在 npm 上查看自己刚刚发布的包

注意，淘宝镜像 10 分钟同步一次，稍微等待一下即可。

七、切回 cnpm，并通过 npm 下载刚刚发布的包

切回 cnpm 淘宝镜像

npm config set registry http://registry.npm.taobao.org/

包安装好了以后，在 node_modules 文件中就能看到。

八、使用自己的 npm 包

使用代码：

使用效果图：

完工，以上就是今天为大家分享的关于使用 vue-sfc-rollup 工具在 npm 上快速发包的步骤，希望对需要的小伙伴提供参考，感谢阅读。