从零创建并发布一个 Npm 包

冷石Boy
324 阅读2分钟

前言

React 项目中经常使用 classnames 包，用来将样式类名连接一起，看了源码使用的是 ES5 的写法，于是使用 typescript 重写了一版。

仓库: mixnames

创建项目

使用 father 创建项目

father 是一款 NPM 包研发工具，能够帮助开发者更高效、高质量地研发 NPM 包、生成构建产物、再完成发布。

npx create-father mixnames

代码编写

仿照 classnames 的写法，将 arguments 替换成剩余参数，将不定数量的参数表示为一个数组，类型是 Union Types

const mixnames = (...args: (string | number | Object | Array<any>)[]): string => {
  /// ...
}

详细查看源码

添加测试

代码写完后使用 vitest 进行测试

Vitest 旨在将自己定位为 Vite 项目的首选测试框架，即使对于不使用 Vite 的项目也是一个可靠的替代方案。

pnpm add -D vitest

在项目根目录新建 test 文件夹；在 package.json 添加 test 脚本

image.png

代码测试

新建 test/mixnames.test.ts，编写测试代码，覆盖全部传参情况

import { expect, test } from 'vitest'
import mixnames from "../src/index";

test("joins arrays of class names and ignore falsy values", () => {
  expect(mixnames("a", 0, null, undefined, true, 1, "b")).toBe("a 1 b");
});

/// ...

mixnames.test.ts

组件测试

添加组件测试依赖，参考 vitest/examples/react

pnpm add jsdom react react-test-renderer jsdom -D

新建 tes/basic.test.tsx，编写 react 组件的测试代码

import React from 'react'
import renderer from 'react-test-renderer'
import mx from '../src/index'

function toJson(component: renderer.ReactTestRenderer) {
  const result = component.toJSON()
  expect(result).toBeDefined()
  expect(result).not.toBeInstanceOf(Array)
  return result as renderer.ReactTestRendererJSON
}

test('expect same classname', () => {
  const button1 = renderer.create(
    <button className={mx("foo", "bar", "baz")}>Confirm</button>,
  )
  const button1Json = toJson(button1)

  expect(button1Json).toMatchSnapshot()
 }
 
 /// ...

basic.test.tsx

通过全部测试用例后就可以发包了

test.jpg

发布

使用 npm version 命令，给项目打上 tag，然后执行 npm publish 将包发布到 npm

# major 主版本
# minor 功能版本
# patch 修复版本
npm version minor

image.png

npm publish

image.png

发布成功后就可以在 npm 查看

Xnip2023-10-16_16-38-47.jpg

mixnames

至此这个包就可以提供给别人安装使用了

pnpm add mixnames

yarn add mixnames

npm install mixnames

自动发布

每次手动发布新版本到 npm 比较麻烦，使用 Github Workflow 可以实现当版本有变化时，自动发包到 npm。

在项目根目录添加 .github/workflows/npm-publish.yml 文件，配置发包的工作流。

name: Node.js Package

on:
  push:
    tags:
      - 'v*'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: 'npm'
      - run: npm i
      - run: npm test

  publish-npm:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: 'npm'
          registry-url: https://registry.npmjs.org/
      - run: npm i
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

先执行测试流程，测试通过之后执行发布流程，需要在项目 secrets 中添加 NPM_TOKEN 环境变量

image.png

这个变量需要在 npmjs.com 生成

image.png

总结

本文通过一个例子说明了如何开发，测试和发布一个 npm 包，感谢阅读 🌹

avatar
文章
阅读
粉丝