feature: 安装TidGi开发与依赖环境的Q&A

[Zacharia2]

Description 描述

在clone项目并搭建开发环境时遇到的问题、注意点及解决方案

1. 使用虚拟机安装原生的Linux环境是最简单有效且问题少的最佳选择。
2. 安装vm虚拟机、Linux Mint并安装nvm（nodejs版本管理器）Linux版nvm安装地址https://github.com/nvm-sh/nvm#installing-and-updating 如果出现安装完成nvm命令提示未找到，可以关闭当前窗口在打开一个（官网是这样说的，我试过没问题）。然后使用nvm安装nodejs（TidGi Version v0.7.9，Node Version: 16.15.0）
3. 在nodejs中安装node-gyp，需要先安装g++（建议使用官方源安装，wsl中使用第三方源可能会出现依赖问题无法安装）、python最新版、make，然后再使用node-gyp configure 配置它使它通过检查。
4. 修改npm源为淘宝源：https://blog.csdn.net/Aria_Miazzy/article/details/106187406

设置NPM/Electron国内源
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/

一定要看electron官方文档 了解调试，主线程与渲染线程，主线程与渲染线程之间的通信，主线程的生命周期。消息机制等概念。

[Zacharia2]

真的全部通过了。

[linonetwo]

代码上还有啥问题吗

[Zacharia2]

看了几天代码，自己使用调试理解了一下

1. 我发现林大大是使用nodejs 的TiddlyWiki模块加载的TiddlyWiki文件夹。所以我也可以使用这个，直接执行保存到文件夹的命令。
2. 我的想法是：在添加工作区wiki的窗口添加一个导入WIKI.HTMl选项卡，在这里获取到用户想要打开的Wiki.HTML和想要保存TiddlyWiki的文件夹。
3. 然后使用nodejs的TiddlyWiki模块解压Wiki.HTML并保存到用户输入的文件夹路径，解压完成之后使用TidGi也就是林大大写的接口加载解压后的TiddlyWiki文件夹。

不知道这样可不可行呢？

[Zacharia2]

同时发现，添加工作区wiki的窗口的导入线上WIKI，只要点击了它，切换到其它选项卡，git身份凭证的那个地方不会消失。我想如果可以，自己顺便修复一下这个。

[linonetwo]

那个其实不用修，因为消失了不就白填了嘛，那个token是存储在配置里的，之后同步笔记还会用到的。

记得先像新建工作区一样，调 useNewWiki https://github.com/tiddly-gittly/TidGi-Desktop/blob/6fdf992c6a21feb722f8569d9b2554776ea68c99/src/pages/AddWorkspace/NewWikiDoneButton.tsx#L25

或者你直接复用这个按钮，只是在useNewWiki里做一下判断 这里调的 window.service.wiki.copyWikiTemplate https://github.com/tiddly-gittly/TidGi-Desktop/blob/6fdf992c6a21feb722f8569d9b2554776ea68c99/src/pages/AddWorkspace/useNewWiki.ts#L75

可以根据一个 if 改为调 window.service.wiki.extractWikiHTML 之类的，这个函数加在 https://github.com/tiddly-gittly/TidGi-Desktop/blob/master/src/services/wiki/index.ts 里面，并在 interface 和 WikiServiceIPCDescriptor 里都注册之后，就能在前端那边调用了 https://github.com/tiddly-gittly/TidGi-Desktop/blob/6fdf992c6a21feb722f8569d9b2554776ea68c99/src/services/wiki/interface.ts#L14-L102

[linonetwo]

慢慢来，你可以先把 UI 弄好，然后 service 具体函数里就加个 console log，先把点击触发 service 的流程跑通，再去写具体的 extractWikiHTML 的功能，这样从 UI 出发会比较有成就感

[Zacharia2]

做好一个输入框，可以接受数据并保存在state里面。按钮还没搞定。

[Zacharia2]

现在已经可以执行解压HTML.WIKI的命令啦。按照林大大的指示做的，真的太棒了！谢谢林大大。

[Zacharia2]

{"level":"error","message":"Tiddlywiki booted failed with error Cannot read properties of undefined (reading 'substr') TypeError: Cannot read properties of undefined (reading 'substr')\n at Object.exports.createDirectory ($:/core/modules/utils/filesystem.js:114:13)\n at new FileSystemAdaptor ($:/plugins/tiddlywiki/filesystem/filesystemadaptor.js:25:12)

[Zacharia2]

再完善流程和UI的逻辑就OK了

[Zacharia2]

{"level":"error","message":"Tiddlywiki booted failed with error Cannot read properties of undefined (reading 'replace') TypeError: Cannot read properties of undefined (reading 'replace') at Object.exports.generateTiddlerFilepath ($:/core/modules/utils/filesystem.js:344:23) at Object.exports.generateTiddlerFileInfo ($:/core/modules/utils/filesystem.js:278:32) at WikiFolderMaker.saveTiddler ($:/core/modules/commands/savewikifolder.js:168:27) at $:/core/modules/commands/savewikifolder.js:156:8 at Object.$tw.utils.each (/home/whitefall/桌面/TidGi-Desktop/node_modules/@tiddlygit/tiddlywiki/boot/boot.js:155:12) at WikiFolderMaker.saveCustomPlugin ($:/core/modules/commands/savewikifolder.js:155:12) at $:/core/modules/commands/savewikifolder.js:99:12 at Object.$tw.utils.each (/home/whitefall/桌面/TidGi-Desktop/node_modules/@tiddlygit/tiddlywiki/boot/boot.js:146:12) at WikiFolderMaker.save ($:/core/modules/commands/savewikifolder.js:79:12) at Command.execute ($:/core/modules/commands/savewikifolder.js:39:25)","timestamp":"2022-11-12T03:12:43.276Z"}

[linonetwo]

我一看怎么会有 Cannot read properties of undefined 这种错，在 TS 时代是基本不会有这种报错的。

原来是 tw 那边的 js 代码的问题啊，那可以看看它源码，一步步看一下，是不是什么参数少传了。

[linonetwo]

substr 和 replace 都是 string 上的函数，所以估计是某个应该传字符串的参数，没传，变成了 undefined 空值。

[linonetwo]

目前这个 UI是可以的，不过要记得用文件夹名作为工作区的名字

[Zacharia2]

我一看怎么会有 Cannot read properties of undefined 这种错，在 TS 时代是基本不会有这种报错的。

原来是 tw 那边的 js 代码的问题啊，那可以看看它源码，一步步看一下，是不是什么参数少传了。

#!/usr/bin/env node

/*
This is invoked as a shell script by NPM when the `tiddlywiki` command is typed
*/

var $tw = require("./boot/boot.js").TiddlyWiki();

// Pass the command line arguments to the boot kernel
$tw.boot.argv = Array.prototype.slice.call(process.argv,2);

// Boot the TW5 app
$tw.boot.boot();

这个是tiddlywiki.js，nodejs，tiddlywiki模块里面的。 我尝试使用终端在模块的目录中执行这个命令也失败了：node tiddlywiki --load /home/whitefall/桌面/mNote.html --savewikifolder /home/whitefall/桌面/mNote

一般情况下在Windows执行是没有问题的。 试着在Linux中全局安装在执行转换操作，发现还是失败了。难道是系统路径的问题嘛。

[linonetwo]

你可以到 nodemodules 里看这个源码的位置，在nodemodules里找到 tiddlywiki 文件夹，然后看 里面的 /core/modules/utils/filesystem.js

TypeError: Cannot read properties of undefined (reading 'replace') at Object.exports.generateTiddlerFilepath ($:/core/modules/utils/filesystem.js:344:23)

就是报错栈里的这个文件，打log一层层看，我平时就这样看 tw 的调用问题的

[linonetwo]

还有在太记里，tw相关操作你可以写到 https://github.com/tiddly-gittly/TidGi-Desktop/blob/master/src/services/wiki/wikiWorker.ts 里，类似 startNodeJSWiki 这个函数，你加一个新的函数，然后加到底部 const wikiWorker = { startNodeJSWiki, 那边，就可以在外面使用了。

把对 tw 的操作放到这里，就算报错崩溃了也不会导致太记app崩溃。

如果你不熟悉这个的调用，可以先写个空函数，里面打log看看调用成功了没

[Zacharia2]

谢谢林大大，我试试这样做。

[Zacharia2]

我发现在Windows上还是Linux上执行tiddlywiki --load ./mywiki.html --savewikifolder ./mywikifolder 都会报错。说Cannot read properties of undefined (reading 'replace')

官网上就是这样写的。。。自己之前还可以执行呢？为啥现在不可以了嘞？

用官方空白tiddlywiki试了一下，发现可以执行并且没有错误，对比之前执行错误的发现，是之前的tiddlywiki可能有问题。

[linonetwo]

也就是说是这个 ./mywiki.html 里面有问题吧，反正有报错就看源码，看看具体是啥问题，也可能是 tiddlywiki 的问题，没法处理这个 html。

[Zacharia2]

是的有的tiddlywiki里面有问题，没法处理。

[Zacharia2]

成功了，终于可以跑通整个流程了。

[Zacharia2]

剩下的工作就是补全代码。然后检查单文件wiki里面哪些插件或条目不能存在，是什么导致无法解压的问题。

[Zacharia2]

已经定位问题，只要这个插件存在就会出现转换错误。$:/plugins/Gk0Wk/notionpage-covericon

删除该插件后，Cannot read properties of undefined (reading 'replace')错误消失。

filesystem.js:344：generateTiddlerFilepath方法中局部变量filepath 由 title参数赋值，找到调用 title参数的实际参数为 tiddler.fields.title，由generateTiddlerFileInfo方法的tiddler参数提供的。

savewikifolder.js:168：找到generateTiddlerFileInfo的函数调用，并找到其参数tiddler，由方法WikiFolderMaker.prototype.saveTiddler的参数tiddler提供。找到此函数的调用者WikiFolderMaker.prototype.saveCustomPlugin（pluginTiddler）

var pluginTiddlers = $tw.utils.parseJSONSafe(pluginTiddler.fields.text).tiddlers; // A hashmap of tiddlers in the plugin
    $tw.utils.each(pluginTiddlers,function(tiddler) {
        self.saveTiddler(directory,new $tw.Tiddler(tiddler));//在这个地方调用的。
    });

然后就不知道咋弄了，我一直找不到那个未定义的的那个条目的那个标题或字段。所以就根据打印log查看最后一个输出的插件或条目信息，手动实验禁用或者删除，发现notionpage-covericon插件导致的问题。

这个是空白的wiki文件，只安装了notionpage-covericon插件，但是无法使用HTML转wiki文件夹命令：mywiki.zip （解压后即可查看）

tiddlywiki --load ./mywiki.html --savewikifolder ./mywikifolder

[linonetwo]

「方法中局部变量filepath 由 title参数赋值」其实看到这就差不多了吧，估计是它这插件少了个 title 参数？

我随便找了个别家的是

{"tiddlers":{"$:/plugins/bimlas/kin-filter/README/concept.svg":{"title":"$:/plugins/bimlas/kin-filter/README/concept.svg","text":"<svg

而它就只有

{"tiddlers":{"$:/plugins/Gk0Wk/notionpage-covericon/default-icon":{"text":"📒"},

可能是这个区别吧，估计是核心得改改了，在没 title 时就用 key 替代。

[Zacharia2]

应该是这个问题。

[Gk0Wk]

啊这，key 都有 title 了，居然还要一个 title 字段吗，我觉得这个其实是 tw 的代码缺陷