想要在npm上快速发包？用vue-sfc-rollup工具即可&细致图解操作流程

问题描述

需求描述

本文记录了使用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包地址：https://www.npmjs.com/package/vue-sfc-rollup
• GitHub地址：https://github.com/team-innovation/vue-sfc-rollup

步骤记录

第一步，准备好要发布的组件

假设我有一个组件，名字叫做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命令行操作

在地址栏输入命令操作：

// 先全局安装

npm install -g vue-sfc-rollup

// 安装好了以后，就可以初始化项目了

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包

使用代码

使用效果图