react-hook-use-cta dev（第 4 部分系列）

概述

我将介绍以下内容：

新平台

现在您有了捆绑构建系统，请开始设置 NPM 来接收您的包。

如果你还没有注册，请通过以下方式完成注册流程

https://www.npmjs.com/signup

然后再继续。

确保使用 TOPT 启用多因素身份验证以提高安全性。如果没有它，本教程将无法进行。如果您错过了这部分，您可以从您的个人资料页面启用它。

`https://www.npmjs.com/settings/your-account-name/profile`

初始化

如果你尚未创建 `package.json`，则可以通过 npm init 完成该过程

npm init

在生成文件之前会要求您填写调查问卷。

npm init -y

创建不包含问卷的文件。

包名.json

以下为最低限度。

请将引用替换为：

{
  "author": {
    "name": "Your name"
  },
  "bugs": {
    "url": "https://github.com/your-account/your-package-name/issues"
  },
  "dependencies": {
  },
  "description": "Sweet package",
  "devDependencies": {
    "@parcel/bundler-library": "2.13.3",
    "@parcel/packager-ts": "2.13.3",
    "@parcel/transformer-typescript-types": "2.13.3",
    "@types/node": "22.10.3",
    "@types/react": "19.0.2",
    "parcel": "2.13.3",
    "react": "19.0.0",
    "rimraf": "6.0.1",
    "typescript": "5.7.2"
  },
  "exports": {
    "import": "./dist/esm/index.mjs",
    "require": "./dist/cjs/index.js",
    "types": "./dist/types.d.ts"
  },
  "files": [
    "dist",
    "src"
  ],
  "homepage": "https://github.com/your-account/your-package-name",
  "keywords": [
    "react",
    "typescript"
  ],
  "license": "MIT",
  "name": "your-package-name",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.mjs",
  "peerDependencies": {
    "@types/react": ">= 16.8.0 || >= 17.0.0 || >= 18.0.0 || >= 19.0.0",
    "react": ">= 16.8.0 || >= 17.0.0 || >= 18.0.0 || >= 19.0.0"
  },
  "peerDependenciesMeta": {
    "@types/react": {
      "optional": true
    }
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/your-account/your-package-name.git"
  },
  "sideEffects": false,
  "source": "src/index.ts",
  "types": "dist/types.d.ts",
  "scripts": {
    "build": "rimraf dist && parcel build --log-level verbose",
    "postversion": "git push && git push --follow-tags",
    "version": "npm run build && git add -A dist",
    "version:major": "npm version major",
    "version:minor": "npm version minor",
    "version:patch": "npm version patch",
    "version:prerelease": "npm version prerelease --preid=pre"
  },
  "version": "0.0.0",
}

大部分都是标准的，但我想强调一下

"files": [
    "dist",
    "src"
  ],

这可以防止发布您的软件包在安装时不需要包含的额外文件。

就我而言，唯一发布的文件是

dist/
src/
LICENSE
README.md
package.json

笔记：

`src/` 可能不需要，但我喜欢将其包括在内以供参考。

注意 注意：

我喜欢用 `--preid=pre` 来标记我的预发布版本，但你可以选择其他内容或者不包括它。

设置说明

您可以在设置中包含一些额外内容，例如 eslint、husky、test 等，但我不想用太多信息来淹没它。我可以在此单独发布更多信息。

Github Actions

他们的市场上有可用的 github 操作，但我想创建一个您可以管理的工作流程。

`.github/workflows/publish-package.yml`

name: Publish to package registry

on:
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

jobs:
  publish:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      id-token: write 

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "lts/*"
          registry-url: 'https://registry.npmjs.org'
          cache: npm

      - name: Restore cache
        uses: actions/cache@v4
        with:
          path: |
            ~/.npm
          key: ${{ runner.os }}-publish-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-publish-

      - name: Install npm dependencies
        run: npm ci

      - name: Publish to npm
        run: npm publish --provenance --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

一个关键的要点是“--provenance --access public”标志。

它们是提高供应链安全性的重要标志。如果没有它们，这个包就不会从 Github 发布。

欲了解更多信息，请阅读生成出处声明

验证_TOKEN

https://dev.to/astagi/publish-to-npm-using-github-actions-23fn 对设置令牌有很好的解释。我将令牌命名为“NPM_AUTH_TOKEN”以匹配“env”

收尾

提交并推送更改到您的仓库。现在您可以看到您的工作流程，

选择要发布的分支或标签，

并点击运行工作流

接下来，我将介绍如何发布到 Javascript Registry。

react-hook-use-cta dev（第 4 部分系列）