自动化发布 npm 包实践

前言

本文主要演示整个发布 npm 包流程。

准备

npx vue-sfc-cli

# 接下来会有一串的提示，请务必填写
# 推荐kebab-case风格，小写字母，多个单词用-（dash）分隔，如my-component
# 如你要发布的是团队npm，component name 请输入子组件名称，然后在owner: 填写自己组织的名称，同时也会创建github组织git地址。注：这里说的组织 为npm 组织包

# 填充完提示后
cd my-component

# 使用git初始化，这样可以使用commit hook
git init

# 安装依赖
yarn

会生成下面的资源文件

├── .all-contributorsrc  # all-contributors配置
├── .babelrc
├── .editorconfig
├── .github
│   └── badge.yml        # github app auto-badge配置，用于给pr自动打标签
├── .gitignore
├── .grenrc.js           # github-release-notes配置
├── .prettierignore      # prettier配置
├── .prettierrc          # prettier配置
├── .travis.yml          # travis ci配置
├── LICENSE              # MIT
├── README.md            # 自述文件
├── build                # rollup配置
│   └── rollup.config.js
├── build.sh             # ci相关文件
├── dist                 # 打包输出目录
├── docs                 # 使用文档，这些md会转换成demo
│   ├── basic.md
├── notify.sh            # ci相关文件，用于钉钉通知
├── package.json
├── src                   # 源文件目录
│   ├── index.js
│   └── upload-to-ali.vue # 单文件组件
├── styleguide.config.js  # vue-styleguidist配置文件
└── yarn.lock

npm 编写

这一步只需要在 src/文件夹下编写即可。

42342343323425

测试用例编写

在生成的docs/文件夹下 md 文件编写测试用例，这里用到的是Vue Styleguidist。文档 api 地址：vue-styleguidist

1 2	yarn dev //启动调试

#basic.md 例子
```vue
<template>
  <div>
    <Form ref="formData" :model="formData" :label-width="160">
      <cpv-file
        :childProp="childProp"
        :formData="formData"
        :modalType="modalType"
      />
    </Form>
    <Button @click="submit" type="success">提交</Button>
    {{ formData }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      /*
       * @childProp
       */
      childProp: {
        name: '附件上传',
        prop: 'file',
        required: true,
        maxSize: 1024 * 10, //10M
        multiple: false,
        fileNum: 1,
        token: '126dcc1f-5bb6-45b4-9c2a-1e74b28ecbe6', //请求携带的 token
        baseUrl: 'oscs-api' //转发地址
      },
      formData: {},
      modalType: 'create'
    }
  },
  methods: {
    submit() {
      this.$refs.formData.validate(valid => {
        if (valid) {
        }
      })
    }
  }
}
</script>

如需第三方依赖，可在styleguide.config.js文件中添加配置

//styleguide.config.js
module.exports = {
  require: ["./styleguide/viewDesign.js"],
};

//cpv-file\styleguide\viewDesign.js
import Vue from "vue";
import ViewUI from "view-design";

import "view-design/dist/styles/iview.css";

Vue.use(ViewUI);

效果如下：

3252523523523

配置 token

配置 github token（如需自动配置 github page）

先在 github 上生成 token

然后打开travis-ci,登录你的 github 账号同步你的仓库，然后打开自动部署开关，然后在.travis.yml文件修改 github-token。

配置 npm token（如需自动发布 npm 包）

打开travis-ci,登录你的 github 账号同步你的仓库。

进入相关项目后,选择右上角的 More options 中的 Settings,填写 token 变量 NPM_TOKEN(在.travis.yml 文件中使用)

更改 npm 版本
,在 push 代码到仓库之前,需要更改项目的版本号.在 commit 所有更改代码之后,使用以下命令可以实现版本号的更改,并且自动完成 commit。或者选择手动更改版本。

1	npm version parch

push 相关代码,自动完成 npm 发布

README 完善（非必须）

如需完成下面的效果，还需

整理 badgen 徽章
完善 npm 描述
团队贡献完善等

badgen 徽章

这里推荐使用 https://badgen.net/

徽章内容来源种类较多,默认按照平台分类,按照特定规则生成徽章,需要手动拼接在线链接

https://badgen.net/badge/:subject/:status/:color?icon=github
                   ──┬──  ───┬───  ──┬───  ──┬── ────┬──────
                     │       │       │       │       └─ Extra Options (label, list, icon, color)
                     │       │       │       │
                     │      TEXT    TEXT    RGB / COLOR_NAME ( optional )
                     │
                  "badge" - default (static) badge generator

选择 npm 徽章，将 micromatch 替换成目标信息

/npm/micromatch/micromatch 替换成 npm/dm/@fe-components/cpv-file

预览徽章效果并手动修改成目标格式

travis 徽章，需要到https://travis-ci.org自动化构建。

发布

# 打包
yarn build

# 可以发布了！
# 或者npm publish
yarn publish

最终效果 @fe-components/cpv-file

前言

准备