前端工具库的 Rollup 打包与 GitHub 自动构建发布npm

前言

在前端开发中，常常需要使用各种工具函数来简化和优化开发流程。为了方便管理和共享这些工具函数，通常会将它们打包成一个前端工具库，并发布到 npm 上。Rollup 是一个流行的 JavaScript 模块打包工具，可以将多个 JavaScript 模块打包成一个或多个文件，非常适合用于构建前端工具库。

构建前端工具库

1. 创建项目

首先，创建一个新的项目目录，并初始化一个 npm 包。可以使用以下命令：

mkdir my-frontend-utils
cd my-frontend-utils
npm init -y

2. 安装 Rollup

接下来，需要安装 Rollup。可以在项目目录中运行以下命令：

npm install rollup -D

3. 创建 Rollup 配置文件

接下来，需要创建一个 Rollup 配置文件。可以在项目目录中创建一个名为 rollup.config.js 的文件，并在其中写入以下内容：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/index.js',
    format: 'cjs',
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({
      babelHelpers: 'bundled',
      presets: ['@babel/preset-env'],
    }),
  ],
};

4. 编写工具函数

接下来，需要编写工具函数。可以在项目目录中创建一个 src 文件夹，并在其中创建 index.js 文件，并在其中写入以下内容：

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
}

export function divide(a, b) {
  return a / b;
}

5. 构建工具库

可以使用以下命令构建工具库：

rollup -c

这将生成一个名为 dist/index.js 的文件，其中包含了打包后的工具函数。

发布到 npm

1. 创建 npm 账号

首先，需要创建一个 npm 账号。可以在 npm 官网上注册一个账号。

2. 初始化 npm 包

接下来，需要初始化 npm 包。可以在项目目录中运行以下命令：

npm init -y

这将在项目目录中创建一个名为 package.json 的文件。

3. 添加脚本

接下来，需要在 package.json 文件中添加一个脚本，用于构建和发布工具库。可以在 package.json 文件中添加以下内容：

{
  "name": "my-frontend-utils",
  "version": "1.0.0",
  "description": "A collection of useful frontend utilities.",
  "main": "dist/index.js",
  "scripts": {
    "build": "rollup -c",
    "publish": "npm publish"
  },
  "dependencies": {
    "rollup": "^2.78.0"
  },
  "devDependencies": {
    "@rollup/plugin-babel": "^5.3.1",
    "@rollup/plugin-commonjs": "^22.0.2",
    "@rollup/plugin-node-resolve": "^13.3.0"
  }
}

4. 发布工具库

可以使用以下命令发布工具库：

npm publish

这将把工具库发布到 npm 上。

配置 GitHub 自动构建和发布 npm

1. 创建 GitHub 仓库

首先，需要在 GitHub 上创建一个新的仓库。可以在 GitHub 官网上创建一个新的仓库。

2. 添加 GitHub Action

接下来，需要在 GitHub 仓库中添加一个 GitHub Action。可以在 GitHub 仓库的 Actions 选项卡中创建一个新的 Action。

3. 选择 Action 模板

在创建 Action 时，可以选择一个 Action 模板。可以选择 Publish Node.js package to npm 模板。

4. 配置 Action

在配置 Action 时，需要指定以下信息：

• Package manager: 选择 npm
• Package path: 指定项目目录的路径
• Publish token: 生成一个 npm 发布令牌，并将其粘贴到此字段中

5. 提交 Action

配置好 Action 后，就可以提交 Action 了。在提交 Action 后，Action 就会自动运行。当有人向 GitHub 仓库 push 代码时，Action 就会自动构建和发布工具库到 npm 上。

结论

通过使用 Rollup 打包前端工具库，并发布到 npm 上，可以方便地管理和共享这些工具函数。此外，通过配置 GitHub Action，可以在有人向 GitHub 仓库 push 代码时自动构建和发布工具库到 npm 上，这可以大大提高开发效率。