有人玩过 excalidraw 这个开源项目的不

Obsidian 上用这插件能支持中文手写体

之前加了一个中文字体 https://github.com/huzhicheng/excalidraw-cn-font

@beldon 对的, 但是现在我是要把这个发布成 npm 包, 我要自己集成调用. 不知道有搞过的小伙伴没.

@fengzheng 你这个中文不是手写体的啊. 另外你知道怎么发布成 npm 包的不? 根据如下的这个文档, 我本地一直没法编译过去.

https://docs.excalidraw.com/docs/@excalidraw/excalidraw/development

把代码放出来看看呗。之前我是在根目录安装依赖，直接进 packages/excalidraw 里跑 yarn run pack 的。

emmm,之前 docker 部署时用了一个笨方法，把默认的英文字体中的一个删除，然后把中文字体改成删除的英文字体的名字即可

加过中文字体

“旁敲侧击的问问题，希望碰上跟你同样需求同样环境同样问题的人来给你一步到位的答案” ❌
“直接核心的把编译错误发出来，让大家引导你一步步解决问题” ✅

@maichael 也不是,就是如果有解决过的话, 其实可能就是一句话的问题. 上面的那个 @IvanLi127 已经说得比较到位了.

这个 excalidraw 涵盖这么多个 project
"workspaces": [
"excalidraw-app",
"packages/excalidraw",
"packages/utils",
"packages/math",
"examples/excalidraw",
"examples/excalidraw/*"
],

现在的问题是, 我希望是通过 sdk 集成的, 所以, 要把 packages/excalidraw 编译了, 发到 npm 做管理. 我尝试在我的环境里头编译 excalidraw-app 是没有问题的. 但是 编译 packages/excalidraw 是有问题的.

我截取个主要的报错,
},
"bugs": "https://github.com/excalidraw/excalidraw/issues",
"homepage": "https://github.com/excalidraw/excalidraw/tree/master/packages/excalidraw",
"scripts": {
"gen:types": "rm -rf types && tsc",
"build:esm": "rm -rf dist && node ../../scripts/buildPackage.js && yarn gen:types",
"pack": "yarn build:umd && yarn pack",
"start": "node ../../scripts/buildExample.mjs && vite",
"build:example": "node ../../scripts/buildExample.mjs",
"size": "yarn build:umd && size-limit"
}
}
PS E:\work\business\excalidraw\packages\excalidraw> npm run build:esm

> excalidraw-zh@1.0.4 build:esm
> rm -rf dist && node ../../scripts/buildPackage.js && yarn gen:types

'rm' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! Lifecycle script `build:esm` failed with error:
npm ERR! Error: command failed
npm ERR! in workspace: excalidraw-zh@1.0.4
npm ERR! at location: E:\work\business\excalidraw\packages\excalidraw
PS E:\work\business\excalidraw\packages\excalidraw> npm run pack

> excalidraw-zh@1.0.4 pack
> yarn build:umd && yarn pack

yarn run v1.22.22
error Command "build:umd" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
npm ERR! Lifecycle script `pack` failed with error:
npm ERR! Error: command failed
npm ERR! in workspace: excalidraw-zh@1.0.4
npm ERR! at location: E:\work\business\excalidraw\packages\excalidraw

@qinfengge 现在的 github 这个版本, 对这个有点提升, 现在放在 \packages\excalidraw\fonts\assets\fonts.css 下有这份文件了, 等我能编译了, 扔个中文字体进去试试.

再提供一份执行的命令:
hawk.jimmy@DESKTOP-J0AGV6C MINGW64 /e/work/business/excalidraw/packages/excalidraw (master)
$ npm run gen:types

> excalidraw-zh@1.0.4 gen:types
> rm -rf types && tsc


hawk.jimmy@DESKTOP-J0AGV6C MINGW64 /e/work/business/excalidraw/packages/excalidraw (master)
$ npm run build:esm

> excalidraw-zh@1.0.4 build:esm
> rm -rf dist && node ../../scripts/buildPackage.js && yarn gen:types

E:\work\business\excalidraw\scripts\woff2\woff2-esbuild-plugins.js:5
const fetch = require("node-fetch");
^

Error [ERR_REQUIRE_ESM]: require() of ES Module E:\work\business\excalidraw\node_modules\node-fetch\src\index.js from E:\work\business\excalidraw\scripts\woff2\woff2-esbuild-plugins.js not supported.
Instead change the require of index.js in E:\work\business\excalidraw\scripts\woff2\woff2-esbuild-plugins.js to a dynamic import() which is available in all CommonJS modules.
at Object.<anonymous> (E:\work\business\excalidraw\scripts\woff2\woff2-esbuild-plugins.js:5:15)
at Object.<anonymous> (E:\work\business\excalidraw\scripts\buildPackage.js:4:32) {
code: 'ERR_REQUIRE_ESM'
}

Node.js v18.19.0
npm ERR! Lifecycle script `build:esm` failed with error:
npm ERR! Error: command failed
npm ERR! in workspace: excalidraw-zh@1.0.4
npm ERR! at location: E:\work\business\excalidraw\packages\excalidraw

hawk.jimmy@DESKTOP-J0AGV6C MINGW64 /e/work/business/excalidraw/packages/excalidraw (master)

node-fetch 现在是一个 esm only 的包，目前的 node 版本下 cjs 不能直接 require esm ，所以会报错

最简单的解决方式是直接注释掉 woff2-esbuild-plugins.js 的第 5 行代码

@xhawk windows 环境？"'rm' is not recognized as an internal or external command"，建议改用 linux 、docker 、wsl 。

感谢 @maichael @lisongeee

项目根目录下执行:
rm yarn.lock

在/home/excalidraw/packages/excalidraw 下执行
yarn gen:types
yarn build.esm
yarn pack

"scripts": {
"gen:types": "rm -rf types && tsc",
"build:esm": "rm -rf dist && node ../../scripts/buildPackage.js && yarn gen:types",
"pack": "yarn build:umd && yarn pack",
"start": "node ../../scripts/buildExample.mjs && vite",
"build:example": "node ../../scripts/buildExample.mjs",
"size": "yarn build:umd && size-limit"
}

然后 npm login, npm publish 是可以发布了.

但是目前发布出来的跟官网的不一样
官网的:
https://www.npmjs.com/package/@excalidraw/excalidraw?activeTab=code
我发布:
https://www.npmjs.com/package/excalidraw-zh?activeTab=code

如果有感兴趣继续研究的伙伴, 大家可以一起研究一下.

没看明白你想要干啥。你是想在自己页面里嵌入一个画板作为子组件还是想要干嘛？

@kneo
他想集成 excalidraw ，但是希望支持中文字体

@kneo 我想用 sdk(npm 包)的方式集成,集成画板, 但是要支持中文的手写体.

@xhawk 官方现在 Release 的版本跟 master 分支差别很大，特别是打包方式。

@maichael 我翻了一遍 https://www.npmjs.com/, 的确有人打包出来跟官方的一样, 但是大部分打包出来的结果都不一样. 其实, 如果打包不一样, 能用也行, 主要是不能用.

我的主要目的是把核心图库自己也能打包成 npm 包. 我看这个帖子也有好几个人收藏, 所以, 也招呼一下感兴趣的小伙伴一起研究一下. 其实就是把核心图库能自己生成 npm 包, 这样子就方便自己开发定义了.