使用 pnpm + Monorepo + rollup 实现Psd、Sketch 转 json开源库, 该json支持作为fabric.js画布模板

这篇具有很好参考价值的文章主要介绍了使用 pnpm + Monorepo + rollup 实现Psd、Sketch 转 json开源库, 该json支持作为fabric.js画布模板。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近使用 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

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

使用

在线体验

https://haixin-fang.github.io/tojson.js/playground

具体开发介绍

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

环境准备

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

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

node.js >= 16

先安装 pnpm

$ npm install -g pnpm

然后安装依赖

$ pnpm bootstrap

运行项目

执行命令

$ pnpm pg

最后在浏览器中打开

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

项目介绍

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

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

安装

安装

npm i -S tojson.js

npm i -S psd-json.js

npm i -S sketchtojson

使用

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);
import sketchtojson from "sketchtojson";
// psd、sketch文件
const result = await sketchtojson(files);
import psdtojson from "psd-json.js";
// psd、sketch文件
const result = await psdtojson(files);
  • getFileType 方法能准确获取文件类型
  • types 返回支持的文件类型, 如 psd、sketch

知识点

  • 如何快速创建 rollup 项目

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

https://github.com/rollup/rollup-starter-lib

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

可以在 package.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

{
  "packageManager": "pnpm@7.1.9"
}
  • 创建的示例项目如果安装正在开发的类库如何调试? 如 playground 项目要安装 tojson.js,
  1. 可以直接通过 pnpm 安装
{
  "dependencies": {
    "tojson.js": "workspace:*",
  }
}

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

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

  1. 如何调试呢?

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

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

import tojson from "tojson.js";

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

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进行修复
import nodePolyfills from "rollup-plugin-polyfill-node";
export default {
  plugins: [nodePolyfills()],
};
  • 如何减少包大小

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

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

总结

开源库的开发无非就几步

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

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

github 地址: https://github.com/haixin-fang/tojson.js
预览地址: https://haixin-fang.github.io/tojson.js/playground/文章来源地址https://www.toymoban.com/news/detail-807831.html

到了这里,关于使用 pnpm + Monorepo + rollup 实现Psd、Sketch 转 json开源库, 该json支持作为fabric.js画布模板的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端食堂技术周刊第 95 期:Fresh 1.4、Rollup 迁移至 SWC计划、RSC Devtools、使用开源库的边界、AI 帮你讲论文

    美味值:🌟🌟🌟🌟🌟 口味:冰葡美式 食堂技术周刊仓库地址:https://github.com/Geekhyt/weekly 大家好,我是童欧巴。欢迎来到前端食堂技术周刊,我们先来看下上周的技术资讯。 Fresh 1.4 发布 H3 1.8 发布 TypeScript 将代码格式化工具迁移到 dprint Rollup 迁移到 SWC 计划 国产 AI 辅助编

    2024年02月11日
    浏览(55)
  • 实现 Rollup 插件alias 并使用vitest提高开发效率

    本篇文章是对 实现 Rollup 插件 alias | 使用 TypeScript 实现库的基本流程 | 使用单元测试提高开发效率 的总结。其中涉及到开发一个组件库的诸多知识点。 首先执行 npm init 命令初始化一个 package.json 文件,由于插件使用了 typescript 作为类型校验,需要执行 tsc --init 命令去生成一

    2024年02月15日
    浏览(46)
  • 实现 Rollup 插件alias 并使用单元测试提高开发效率

    本篇文章是对 实现 Rollup 插件 alias | 使用 TypeScript 实现库的基本流程 | 使用单元测试提高开发效率 的总结。其中涉及到开发一个组件库的诸多知识点。 首先执行 npm init 命令初始化一个 package.json 文件,由于插件使用了 typescript 作为类型校验,需要执行 tsc --init 命令去生成一

    2024年02月16日
    浏览(46)
  • 开源库nlohmann json使用备忘

    nlohmann/json是一个用于解析JSON的开源C++库,口碑一流,无需额外安装其他第三方库,还支持单个头文件模式,使用起来非常方便直观。 从官网https://github.com/nlohmann/json的Release页面下载单个 json.hpp 即可直接使用,无需单独编译。 下面以示例的方式罗列nlohmann/json库的基本使用方

    2024年02月16日
    浏览(32)
  • 【Unity编辑器扩展】(一)PSD转UGUI Prefab, Aspose.PSD和Harmony库的使用

    【Unity编辑器扩展】(二)PSD转UGUI Prefab, 图层解析和碎图导出_psd导入unity_TopGames的博客-CSDN博客 【Unity编辑器扩展】(三)PSD转UGUI Prefab, 一键拼UI/同步字体/自动9宫切图(完结篇)_TopGames的博客-CSDN博客 解放UI程序/美术? psd文件一键转ui prefab 支持所有ui类型 支持textmeshpro psd一键转ugui

    2024年02月05日
    浏览(37)
  • [C++ Json开源库] nlohmann安装与使用

    nlohmann json GitHub - nlohmann/json: JSON for Modern C++ 是一个为现代C++(C++11)设计的JSON解析库,主要特点是: 1、易于集成,仅需一个头文件,无需安装依赖 2、易于使用,可以和STL无缝对接,使用体验近似python中的json Linux下: 拉取nlohmann库文件 自己建立一个项目工程文件夹, 将i

    2024年04月11日
    浏览(34)
  • c语言-json开源库cJSON的使用

    一、cJSON的介绍     cJSON是一个开源的JSON解析器,用于解析JSON数据。它是由纯C语言实现,因此跨平台性好,移植简单。 下载地址: 二、移植方法     cJSON只有一个cjson.c和cjson.h文件,可以很方便地集成到其他项目中。cJSON支持将JSON数据解析为cJSON对象,也支持将cJSON对象转

    2024年04月29日
    浏览(31)
  • 于vue3+vite+element pro + pnpm开源项目

    河码桌面是一个基于vue3+vite+element pro + pnpm 创建的monorepo项目,项目采用的是类操作系统的web界面,操作起来简单又方便,符合用户习惯,又没有操作系统的复杂! 有两个两个分支,一个是web版本,一个是electron,只需要将分支切换到electron即可,下面有electron的效果图。 web开

    2024年02月12日
    浏览(44)
  • XD转Sketch完美实现,这款神器助你轻松转换设计文件

    Adobe XD和Sketch作为主流设计软件,却存在文件格式不兼容的痛点。设计师经常需要在两款软件之间互相转换设计稿件,头疼不已。那么有没有一种简单快捷的方法实现XD到Sketch的格式转换呢?答案是有的!今天就来看看这个神奇的在线互转工具。 XD转Sketch,在线免费转 这个全新的浏

    2024年02月11日
    浏览(36)
  • Doris----Rollup表分析及案例实现

    ROLLUP 在多维分析中是“上卷”的意思,即将数据按某种指定的粒度 进行进一步聚合 。 之前的聚合模型: 用户id 数据插入时间 城市 年龄 性别 最后一次访问的时间 该用户的总消费额 该用户的最大停留时长 该用户的最小停留时长 10000 2017/10/2 北京 10 0 2017/10/02 08:00:00 65 15 2 10

    2024年02月07日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包