设计自己的开源库

最近使用 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,
  1. 可以直接通过 pnpm 安装
js 复制代码
{
  "dependencies": {
    "tojson.js": "workspace:*",
  }
}

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

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

  1. 如何调试呢?

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

比如在组件内部使用到类库 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...

相关推荐
周亚鑫4 分钟前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
落魄小二13 分钟前
el-table 表格索引不展示问题
javascript·vue.js·elementui
y52364814 分钟前
Javascript监控元素样式变化
开发语言·javascript·ecmascript
Justinc.20 分钟前
CSS3新增边框属性(五)
前端·css·css3
fruge28 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia36 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫37 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
嚣张农民43 分钟前
JavaScript中Promise分别有哪些函数?
前端·javascript·面试
光影少年1 小时前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_1 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习