设计自己的开源库

最近使用 pnpm + Monorepo + rollup 开源了一个工具库 tojson.js

tojson.js 是一个支持解析 Psd、Sketch 转 json 的类库, 该 json 满足 fabric.js 画布渲染的数据格式. 后期也会增加 ppt、pdf 格式

工具选择

为什么要使用 pnpm + Monorepo ?

不止开源了一个工具库 tojson.js, 也开源了 sketchtojson, pst-json.js 库, tojson.js 把其他库结合在一起, 后期也会增加其他类库. 如果使用 Monorepo(是一种项目代码管理方式，指单个仓库中管理多个项目)，有助于简化代码共享、版本控制、构建和部署等方面的复杂性，并提供更好的可重用性和协作性。

使用 pnpm 的原因是通过共享依赖来减少磁盘占用，同时提供了快速的安装和更新速度, 最主要的是支持配置工作区（workspace）, 这样创建 n 个库, 都可以使用 pnpm 一键安装和打包

为什么要使用 rollup 作为打包工具?

rollup 适合作为一个类库打包工具,支持 ES6 模块，支持 Tree-shaking

上面这些原因网上都能找到, 简单来说, 就是方便我开发多项目类库

使用

在线体验

haixin-fang.github.io/tojson.js/p...

具体开发介绍

sketch 文件转 fabric.js 画布模板 json 的实现原理(juejin.cn/post/731304...) psd 文件转 fabric.js 画布模板 json 的实现原理(juejin.cn/post/730499...)

环境准备

playground 为示例项目，就是为开发者提供的基础应用示例。在根目录 playground 文件下

示例项目使用了 vue3 + vite 技术栈

node.js >= 16

先安装 pnpm

bash 复制代码

$ npm install -g pnpm

然后安装依赖

bash 复制代码

$ pnpm bootstrap

运行项目

执行命令

bash 复制代码

$ pnpm pg

最后在浏览器中打开

即可得到一个解析 Sketch, Psd 为 json 的项目

项目介绍

在本项目中，我们核心内容，是包含在 packages/* , 其中是解析各个文件的核心代码

psd-json.js 解析 psd 转 json 的类库
sketchtojson 解析 sketch 转 json 的类库
tojson.js 解析 psd、sketch 转 json 的类库

安装

js 复制代码

npm i -S tojson.js

或

js 复制代码

npm i -S psd-json.js

或

js 复制代码

npm i -S sketchtojson

使用

js 复制代码

import toJson, { getFileType, types as fileTypes, psdtojson, sketchtojson } from "tojson.js";
// psd、sketch文件
const result = await toJson(files);
// 或
const result = await psdtojson(files);
// 或
const result = await sketchtojson(files);

js 复制代码

import sketchtojson from "sketchtojson";
// psd、sketch文件
const result = await sketchtojson(files);

js 复制代码

import psdtojson from "psd-json.js";
// psd、sketch文件
const result = await psdtojson(files);

getFileType 方法能准确获取文件类型
types 返回支持的文件类型, 如 psd、sketch

知识点

如何快速创建 rollup 项目

通过官方 rollup 提供的 example 直接创建 rollup 项目

github.com/rollup/roll...

打包文件类型有 umd、cjs、es, 分别代表浏览器端、commonjs、es Module 支持的文件类型, 这样的话不同类型项目中都可以直接引用
上面说了可以打包成多种文件类型, 那如果正确的导入?

可以在 package.json 中进行区分

如

json 复制代码

{
  "main": "dist/tojson.js.cjs.js",
  "module": "dist/tojson.js.esm.js",
  "browser": "dist/tojson.js.umd.js"
}

main: 默认入口如const tojson = require("tojson.js") module: es Module 入口, 如果使用 import tojson from 'tojson.js' 会自动使用 module 指向的文件 browser: 浏览器默认入口, 可以直接通过 <script src="./dist/sketchtojson.umd.js"></script> 进行使用

使用 pnpm 进行 github actions, 必须指定 pnpm 版本,否则 github 打包会失败

package.json

json 复制代码

{
  "packageManager": "pnpm@7.1.9"
}

创建的示例项目如果安装正在开发的类库如何调试? 如 playground 项目要安装 tojson.js,

可以直接通过 pnpm 安装

js 复制代码

{
  "dependencies": {
    "tojson.js": "workspace:*",
  }
}

tojson.js 就会被替换成内部模块, 这样的话就可以直接调试 tojson.js

不过这样有个缺点, 如果提交到 github 中, github actions 会报错找不到 tojson.js 模块, 所以我们还是需要指定到对应版本号, 且 tojson.js 发布到 npm 中, 这样 github 就能直接打包生成 page

如何调试呢?

可以通过模块路径替换的形式

比如在组件内部使用到类库 tojson.js

js 复制代码

import tojson from "tojson.js";

在 vite.config.js 中可以通过配置 alias 的方式替换导入路径, 指向我们要调试的路径

js 复制代码

const alias = [];
if (process.env.NODE_ENV != "production") {
  alias.push({ find: /^tojson.js$/, replacement: path.join(__dirname, "../packages/tojson.js/src/index.js") });
}
export default defineConfig({
  resolve: {
    alias,
  },
  base: "/tojson.js/playground",
  plugins: [vue()],
});

这样就能在本地直接调试 tojson.js 仓库

项目中如果引用了 node.js 原生模块, 可以使用rollup-plugin-polyfill-node进行修复

js 复制代码

import nodePolyfills from "rollup-plugin-polyfill-node";
export default {
  plugins: [nodePolyfills()],
};

如何减少包大小

在项目中,我们可能会引用其他类库, 如果我们也打包进去, 则会增加包的体积, 所以我们可能把引入的包给过滤掉, 来减少包的大小

因为我们在 dependencies 中引入了依赖包,当下载该包的时候也会自动安装进行引入, 所以不用担心包没有, 造成功能不全

总结

开源库的开发无非就几步

选择技术架构
开发调试
发布 npm

希望大家都有自己的开源仓库

github 地址: github.com/haixin-fang... 预览地址: haixin-fang.github.io/tojson.js/p...