超简单:github-action自动化发布npm包小记

这篇具有很好参考价值的文章主要介绍了超简单:github-action自动化发布npm包小记。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.注册npm账号

打开npm官网,并注册自己的npm账号

2.申请AccessToken

1.登录npm官网,登录成功后,点开右上角头像,并点击Access Tokens选项
超简单:github-action自动化发布npm包小记,前端工具,npm,ci/cd,前端
2.点开Generate New Token下拉框,点击Classic Token(和Granular Access Token有什么区别,请自行查验?)
超简单:github-action自动化发布npm包小记,前端工具,npm,ci/cd,前端
3.填写token信息,选择token类型为Automation(可以避免2FA校验),保存申请的token信息(等下会用到)

3.github新建代码仓库

在github上面创建新的空仓库
超简单:github-action自动化发布npm包小记,前端工具,npm,ci/cd,前端

4.修改仓库设置

1.进入新建的代码仓库,点击仓库tab选项卡的Settings
超简单:github-action自动化发布npm包小记,前端工具,npm,ci/cd,前端
2.点开Secrets and variables选项卡,点击Actions选项,点击对应页面的New repository secret按钮
超简单:github-action自动化发布npm包小记,前端工具,npm,ci/cd,前端
3.新建名称为NPM_TOKEN的secret, 并将刚刚申请到的npm token(前面要你保存的token)填入secret字段
超简单:github-action自动化发布npm包小记,前端工具,npm,ci/cd,前端

5.新增ci文件

在代码根目录新建.github/workflow/ci.yml文件,文件内容如下

name: CI
on:
  push:
    branches:
	  # 触发ci/cd的代码分支
      - master
jobs:
  build:
    # 指定操作系统
    runs-on: ubuntu-latest
    steps:
      # 将代码拉到虚拟机
      - name: Checkout repository
        uses: actions/checkout@v2
      # 指定node版本
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16.x'
          registry-url: 'https://registry.npmjs.org'
      # 依赖缓存策略
      - name: Cache
        id: cache-dependencies
        uses: actions/cache@v3
        with:
          path: |
            **/node_modules
          key: ${{runner.OS}}-${{hashFiles('**/pnpm-lock.yaml')}}
      # 安装pnpm
      - name: Install pnpm
        run: npm install -g pnpm@7.5.0
      # 依赖下载
      - name: Installing Dependencies
        if: steps.cache-dependencies.outputs.cache-hit != 'true'
        run: pnpm install
      # 打包
      - name: Running Build
        run: pnpm run build
      # 测试
      - name: Running Test
        run: pnpm run test-unit
      # 发布
      - name: Running Publish
        run: npm publish
        env:
          # NPM_TOKEN is access token
         NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

npm代码如下

name: CI
on:
  push:
    branches:
      # 触发ci/cd的代码分支
      - master
jobs:
  build:
    # 指定操作系统
    runs-on: ubuntu-latest
    steps:
      # 将代码拉到虚拟机
      - name: Checkout repository
        uses: actions/checkout@v2
      # 指定node版本
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16.x'
          registry-url: 'https://registry.npmjs.org'
      # 依赖缓存策略
      - name: Cache
        id: cache-dependencies
        uses: actions/cache@v3
        with:
          path: |
            **/node_modules
          key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}
      # 依赖下载
      - name: Installing Dependencies
        if: steps.cache-dependencies.outputs.cache-hit != 'true'
        run: npm install
      # 打包
      - name: Running Build
        run: npm run build
      # 测试
      - name: Running Test
        run: npm run test-unit
      # 发布
      - name: Running Publish
        run: npm publish
        env:
          # NPM_TOKEN is access token
         NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

6.推送代码至github

在代码目录初始化git,并将代码推送到刚刚github上面新建的代码仓库master分支,会自动触发ci/cd进行自动化发包文章来源地址https://www.toymoban.com/news/detail-752491.html

到了这里,关于超简单:github-action自动化发布npm包小记的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【日常记录】自动化部署与持续交付:GitHub Actions CICD

    当我们做项目的时候,如果做完了,要发布,就需要打包,扔到服务器上,如果改了一点东西,还得打包,扔到服务器上,重复的执行 打包= 扔到服务器上 详细记录如何使用github actions自动化部署项目 自动化部署与持续交付:GitHub Actions CICD 自动化部署一般以下方式 Jenkins

    2024年02月02日
    浏览(65)
  • Github Actions实现Spring Boot自动化部署(第二弹)

    ​ 今天就来讲述一下如何使用GitHub结合Actions实现Spring Boot程序从提交代码到打包、容器化、部署全过程自动化。首先咱们得现有一个能够在本地运行的Spring Boot程序,并且在Github上拥有一个仓库。 1.1 提交代码到Github 1.2 设置服务器密钥、GitHub私钥、DockerHub账号 secret value rem

    2024年02月08日
    浏览(47)
  • 从零用VitePress搭建博客教程(7) -– 如何用Github Actions自动化部署到Github Pages?

    接上一节: 从零用VitePress搭建博客教程(6) -– 第三方组件库的使用和VitePress搭建组件库文档  我们搭建完成vitePress后,那么接下来就是如何部署到线上服务器,这里使用Github Pages,免得自己购买服务器,当然你也可以自己购买服务器来部署(比如阿里云服务器)。 在部署之

    2024年02月08日
    浏览(73)
  • 【Github-Action】统计整个社区所有项目的贡献

    项目地址 如果你对github-action感兴趣,还可以看这篇文章, 这篇文章教会你如何开发Github Action,并且让你明白它是什么,怎么用,如何做到的。如何开发一个action 我是一个生成 contributors.png 的 github-action,我和市面上其他的不一样,我专门解决整个 Organization 的 commit 统计,

    2024年01月16日
    浏览(49)
  • 使用Github-Action持续部署Springboot或vue

    GitHub Actions 是 GitHub 提供的一项持续集成 (CI) 和持续部署 (CD) 服务。它允许你在代码仓库中定义和运行自动化的工作流程,以响应存储库中的事件或调度。GitHub Actions 可以用于构建、测试、打包和部署项目,也可以执行其他自动化任务。 详细github action相关信息请看最底部 第

    2024年01月16日
    浏览(54)
  • Django实现接口自动化平台(十)自定义action names【持续更新中】

    相关文章: Django实现接口自动化平台(九)环境envs序列化器及视图【持续更新中】_做测试的喵酱的博客-CSDN博客 深入理解DRF中的Mixin类_做测试的喵酱的博客-CSDN博客  python中Mixin类的使用_做测试的喵酱的博客-CSDN博客  本章是项目的一个分解,查看本章内容时,要结合整体项

    2024年02月16日
    浏览(69)
  • Github 自动化部署

    官方地址 点击进入 注册/登录 .githubworkflows 固定不变 develop.yml 文件名自定义 变量解释 secrets 是定义在github中的变量 通过 secerts.变量名 来取值 steps steps 是github action的 create_release 是上一个步骤的 id outputs.upload_url 是上一个步骤的返回结果 仓库地址:https://github.com/yi-

    2024年02月03日
    浏览(51)
  • Github 自动化部署到GitHub Pages

    前言 github仓库示例: automated-deployment 1.准备工作 新建仓库 新建项目 配置 vite.config.ts 部署应用包时的基本URL,例:vue-cli 5.x 配置 publicPath 推送到远程仓库 2.配置 GitHub Token 点击 Settings - Actions - General 找到 Workflow permissions,选中第一项并保存 工作流默认是没有推送代码的权限,

    2024年02月05日
    浏览(71)
  • 微信小程序自动化发布

    文章描述不清 有疑问可以私信 Alison-Bird 参考:https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html 参考:https://www.npmjs.com/package/miniprogram-ci 上传文件 xx.js

    2024年02月07日
    浏览(40)
  • DevOps实现自动化发布实操

    本篇文章来自 B站视频(部分步骤与视频存在差异) 本地编写代码 提交至远程仓库 Jenkins(基于Docker)通过内置Git获取提交的代码,通过Maven进行打包,形成可执行文件,发送至目标服务器并执行启动命令 访问目标服务器查看效果 查看目标服务器,并未启动java项目 访问Jen

    2024年02月12日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包