发布npm包上一篇介绍了rollup的打包项目https://juejin.cn/post/73579326160857

上一篇介绍了rollup的打包项目juejin.cn/post/735793… 本文介绍最简单的npm发包流程，使用pnpm的monorepo管理包工程，使用changesets来发布包，打包工具为rollup

创建项目目录

mkdir hong-coding

package.json初始化并修改

pnpm init

添加文件pnpm-workspace.yaml，添加packages文件夹，monorepo项目都在这个文件夹下创建

# pnpm-workspace.yaml
packages:
  - "packages/*"

安装changesets rollup rollup-plugin-typescript2

pnpm add @changesets/cli rollup rollup-plugin-typescript2 -D -w

初始化changesets

npx changeset init 生成配置文件

{
  "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
  "changelog": "@changesets/cli/changelog", // 更新日志生成函数的加载地址
  "commit": true,  // 自动提交version的改动
  "fixed": [],     // 捆绑发布的包
  "linked": [],    // 设定版本保持一致的包
  "access": "public", // 公开，如果你想阻止一个包被发布到npm，在包的package.json中设置private: true （可选值：restricted，不公开）
  "baseBranch": "master",  // 主分支名
  "updateInternalDependencies": "patch", // 是否主动更新package的依赖，patch、minor
  "ignore": []  // 指定不发布的包
}

修改package.json，注意name为自己的项目名，只需修改scripts

{
  "name": "hong-coding",
  "version": "0.0.1",
  "description": "",
  "scripts": {
    "build": "pnpm -r run build",
    "changeset": "changeset",
    "vp": "changeset version",
    "release": "pnpm build && pnpm release:only",
    "release:only": "changeset publish --registry=https://registry.npmjs.com/"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@changesets/cli": "^2.27.1",
    "@rollup/plugin-commonjs": "^25.0.7",
    "rollup": "^4.14.2",
    "rollup-plugin-typescript2": "^0.36.0"
  }
}

.gitignore，顺便说一下这个文件的创建，内容根据自己的需要填写（这里也是copy的其他项目里的，不想更改了）

node_modules
coverage
.nyc_output
.DS_Store
*.log
.vscode
.idea
dist
compiled
.awcache
.rpt2_cache
docs
/lib
/dist
packages/**/lib

创建monorepo下的项目

cd packages

mkdir e-tabs

pnpm init

修改package.json，注意发布共有包需要修改publishConfig，指明发布包的文件files，注意main指向打包后的入口文件

{
  "name": "@hong-coding/e-tabs",
  "version": "0.0.1",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "serve": "rollup -c -w",
    "build": "rollup -c"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "files": ["dist"],
  "publishConfig": {
      "access": "public"
  }
}

创建rollup.config.mjs、tsconfig.json

import { defineConfig } from "rollup";
import typescript from "rollup-plugin-typescript2";
import path from "path";
import {fileURLToPath} from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default defineConfig([
  {
    input: "src/index.ts", //入口文件
    output: [
      {
        file: path.resolve(__dirname, "dist/main.js"),
        format: "cjs",
        name: "main.cjs",
        // exports: "named" // 以免与cjs混淆 https://rollupjs.org/guide/en/#outputexports
      },
      {
        file: path.resolve(__dirname, "./dist/main.umd.js"),
        format: "umd", // 打包成UMD模块
        name: "Hello" // 打包成UMD模式，需提供name
      },
      {
        file: path.resolve(__dirname, "./dist/main.iife.js"),
        name: "Hello",
        format: "iife" // iife 表示立即执行函数
      }
    ],
    plugins: [
      typescript(),
    ]
  },
]);

{
    "compilerOptions": {
        "target": "ES2019",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": false,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "strict": true,
        "module": "ESNext",
        "moduleResolution": "node",
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "isolatedModules": false,
        "allowSyntheticDefaultImports": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "noImplicitThis": false,
        "noImplicitAny": false,
        "declaration": true,
        "baseUrl": "./",
        "outDir": "./dist",
        "rootDir": "./src",
        "paths": {
            "@/*": ["./src/*"],
        }
    },
    "include": ["./src/**/*"],
    "exclude": ["../../node_modules/**/*"]
}

在e-tabs中创建src/index.ts文件

const Hello = () => {
  console.log('Hello, world!')
}

export default Hello;

在e-tabs中创建exemple/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="text/javascript" src="../dist/main.umd.js"></script>
  </body>
</html>

回到项目根目录发布包

pnpm relesae（第一次发包直接执行）

将项目加入到变更集中

pnpm changeset add (之后执行pnpm changeset是一样的)

直接敲两次回车则默认是PATCH

PATCH 是指补丁版本号，一般用于 bug fix 以及修复安全性问题等 MINOR 是指副版本号，用于小功能的改善 MAJOR 是指主版本号，通常在重大更新的时候才会需要更新主版本号

需要提升版本

pnpm vp

发布前需要有npm的账号并登录

npm login

如有遇到以下问题

参考：www.yuque.com/xianzhixing… 《npm ERR! code ETIMEDOUT》