构建你的第一个 NPM 包：将你的前端工具函数打包成可复用工具

前端

2024-01-27 18:35:05

前言

作为一名前端开发者，我们经常发现自己在不同的项目中重复使用相同的工具函数。从字符串操作到日期格式化，这些函数构成了我们日常工作流程的基本组成部分。虽然从其他开源包中安装现成的解决方案很方便，但有时自己构建一个定制的包可能是更有利的选择。

第一步：构思你的包

在开始编码之前，花点时间考虑你的包的范围和目标。以下是一些关键问题需要问自己：

你要解决什么特定的问题？
你的目标受众是谁？
你的包将提供哪些功能？

明确定义你的包的范围将帮助你专注于创建满足特定需求的解决方案。

第二步：设置项目

创建一个新的 Node.js 项目，并安装必要的依赖项：

npm init -y
npm install --save-dev @rollup/plugin-commonjs @rollup/plugin-json @rollup/plugin-node-resolve @rollup/plugin-typescript @rollup/rollup

第三步：编写你的工具函数

在 src 目录中创建你的工具函数文件，例如 utils.ts：

// 字符串反转函数
export const reverseString = (str: string): string => {
  return str.split("").reverse().join("");
};

// 日期格式化函数
export const formatDate = (date: Date, format: string): string => {
  // ... 你的代码
};

第四步：配置 Rollup

Rollup 是一个模块打包器，我们将使用它来构建我们的 NPM 包。在项目根目录创建一个 rollup.config.js 文件：

import typescript from "@rollup/plugin-typescript";
import commonjs from "@rollup/plugin-commonjs";
import nodeResolve from "@rollup/plugin-node-resolve";
import json from "@rollup/plugin-json";

export default {
  input: "src/index.ts",
  output: {
    file: "dist/index.js",
    format: "cjs",
  },
  plugins: [
    typescript(),
    commonjs(),
    nodeResolve(),
    json(),
  ],
};

第五步：构建你的包

运行 rollup -c 命令来构建你的包。这将在 dist 目录中生成一个包含你的工具函数的 JavaScript 文件。

第六步：创建 NPM 包

创建一个 package.json 文件并填写必要的元数据：

{
  "name": "my-frontend-utils",
  "version": "1.0.0",
  "main": "dist/index.js",
  "dependencies": {},
  "devDependencies": {
    // ... 你的开发依赖项
  },
  "scripts": {
    "build": "rollup -c",
    "test": "echo \"Error: no tests specified\""
  },
  "keywords": ["npm", "frontend", "utils", "javascript"]
}