npm with github action:2021-5-30

[jsonz1993]

本文为博客迁移过来，原文链接: npm with github action:2021-5-30

写一个最简单的npm包
了解github Action并基于他发布你的npm包

最近用storybook 写组件的时候，发现storybook没有支持less，所以写了个小npm包，并利用github Action来持续部署，省去人工的步骤。

简单的npm包

我们先来了解简单的npm包需要包含哪些东西，这里暂时不展开讨论，后面有机会再开一个详细讲。

一个package.json

直接在项目下跑npm init -y初始化选项即可，这里列出几个比较重点且必须的字段

• name npm包的名字，一般使用小写字母加中划线的命名规范
• vension 包版本号，一般情况下为三位x.y.z：向后兼容的bug修复补丁递增z；向后兼容的features新功能递增y；破坏性改动递增x版本号。语义化的规范
• description 用于描述当前包，会展示在npm搜索框的提示中

开源协议

比较常见宽松就是 Apache和MIT协议，具体区别可见下图

^{_图取自阮一峰博客，由Paul Bagwell制作_}

主文件

主文件默认取 package.json下的 main字段

这里我的主文件很简单，就是把less-loader加到storybook当前webpack配置中

module.exports = function useLessLoader(config, handleLessRule) {
  const cssModel = config.module.rules.find(i => i.test.toString() === "/\\.css$/")
  let lessRule = {
    test: /\.less$/,
    sideEffects: true,
    use: [
      ...cssModel.use,
      {
        loader: 'less-loader'
      }
    ]
  }
  if (handleLessRule) lessRule = handleLessRule(lessRule)
  config.module.rules.push(lessRule)
  return config
}

就这样，一个简单的npm包就完成了，先把他push到github上。

接下来就是如何利用github Action把他发布到npm上

Github Action 发布 npm 包

github上面有官方提供的 npm publish action，所以对我们来说，几乎只剩下配置 npm auth token就可以。

npm access token生成

进到npm设置页，点击Generate New Token，选择Automation 生成完token页面先别关，后面需要用到这个token。

github Seecrets

进到仓库的 setting > Secrest > New serest，把刚才的 npm token 拷贝进来，名字就叫 npm_token

github Action 设置

保存后进到仓库 Action > New Workflow

找到 Publish Node.js Package点击 set up this workflow 找不到的可以直接 set up a workflow yourself，然后拷贝他的部署配置进来

根据自己发布要求修改工作流脚本，像我的npm包很简单，只需要在创建一个release的时候自动把当前的包发布到npm上即可，详细的action 文档。

name: publish npm

on:
# 在创建release之后触发
  release:
    types: [created]

jobs:
  publish-npm:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12
          registry-url: https://registry.npmjs.org/
      # 跑npm publish 发布npm包
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}