八.组件发布

前言

组件写好后，可以通过简单的配置已包的形式发布到 npm 上，用户通过 npm 安装相应的包。

1.组件包发布

1.1 手动发布

• 1.注册 npm

  npm 官网注册个账号 https://www.npmjs.com/

• 2.登录 npm

npm login

• 3.参数配置

// package.json
"main": "js/about.48e7d88e.js", // 设置入口文件
"private": false, // 设置为公开库
"keywords": [], // 设置搜索关键词
"description": "描述",
"author": "zhoubichuan",
"name": "zhoubichuan", // 在 npm 官网上存在相同的名称则会报错无法上传，会提示你没有权限修改此库
"version": "1.1.0", // 版本，每次上传的版本号不能相同，所以每次上传都要手动升级版本号

• 4.发布组件

npm publish

• 5.撤销发布的 npm 包

npm --force unpublish web-vue2x

• 需要注意的是：
  • 1、撤销 npm 包需要加上 --force 强制执行才可以实现;
  • 2、撤销的包不能立马再次发布

1.2 自动发布

• 通过打tag方式自动化发布组件

name: publish

on:
  push:
    tags:
      - "*"

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 14
      - run: npm ci
      - run: npm test

  publish-npm:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 14
          registry-url: https://registry.npmjs.org/
      - run: npm ci
      - run: npm run build:comps && cd lib && npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

  publish-gpr:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 14
          registry-url: https://npm.pkg.github.com/
      - run: npm ci
      - run: npm run build:comps && cd lib && npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.ACCESS_TOKEN}}

2.内网部署

总结

可以看到组件发布其实挺简单的，主要是要把 package 里面配置好。同理可以在内网发布相关的包文件。