手把手教你写一个自动更新iconfont图标库的npm包

2023-12-24 14:36:25

嘿，伙计们！准备好踏上编写一个真正有用的 npm 包的旅程了吗？今天，我们将共同打造一个自动更新 iconfont 图标库的 npm 包，让你的开发之旅更加便捷。

前言

开发 npm 包对于前端工程师来说至关重要。作为一个编写过插件的人，我相信你一定会对它感兴趣。让我们深入了解一下如何创建这样一个实用的工具。

步骤指南

1. 初始化项目

首先，让我们用 npm 创建一个新项目：

npm init -y

2. 安装依赖项

接下来，我们需要安装一些必备依赖项：

npm install --save-dev cross-fetch concurrently fs-extra glob

3. 编写核心逻辑

现在，让我们编写核心逻辑。创建一个名为 index.js 的文件，并添加以下代码：

const crossFetch = require("cross-fetch");
const fs = require("fs-extra");
const glob = require("glob");
const path = require("path");
const rimraf = require("rimraf");

async function updateIcons() {
  // 从 iconfont 下载 SVG 文件
  const response = await crossFetch("https://www.iconfont.cn/api/icon.json");
  const json = await response.json();

  // 清空原有图标
  rimraf.sync("dist");

  // 创建目录结构
  fs.ensureDirSync("dist/svg");

  // 下载并保存 SVG 文件
  for (const icon of json.icons) {
    const svg = await (await crossFetch(icon.path)).text();
    fs.writeFileSync(path.join("dist/svg", `${icon.id}.svg`), svg);
  }

  // 转换 SVG 为字体文件
  const concurrently = require("concurrently");
  await concurrently(["svg2ttf dist/svg/ --font-name=iconfont --output-file=dist/iconfont.ttf", "svg2otf dist/svg/ --font-name=iconfont --output-file=dist/iconfont.otf"]);
}

updateIcons();

4. 创建 package.json

接下来，创建一个 package.json 文件：

{
  "name": "iconfont-updater",
  "version": "1.0.0",
  "description": "Automatically updates iconfont icon library",
  "main": "index.js",
  "scripts": {
    "update": "node index.js"
  },
  "keywords": ,
  "dependencies": {
    "cross-fetch": "^3.1.4",
    "concurrently": "^7.2.1",
    "fs-extra": "^10.0.1",
    "glob": "^7.2.0"
  },
  "devDependencies": {
    "rimraf": "^3.0.2"
  }
}