需要知道词典嵌入的词典css的文件名称。
上面两点先判断出来。
判断方式:
goldendict加载后,F12看网络链接,词典内查询单词,确定css文件的名称。
原则上文件名很容易确认。
3. 在词典的目录建一个同名的css文件。
文件的初始内容可以解包mdx词典中获取。(上图中的gd中显示的可以参考,需要去除 #gdfrom-xxxxxx等选择限定,bres://xxxxxx/前缀等,不熟悉的还是不要用这份作为初始内容。)
4.按你的需要在原始内容的基础上修改css样式。gd加载的时候会优先词典目录下的样式文件。
另,上图中基于的gd版本位于Releases · xiaoyifang/goldendict
我们的目标是建立一个前端组建库, 使用的技术栈是father+docz,同时要支持typescript, 在build出来的es目录中要能够生成“.d.ts”后缀的类型声明文件,因为只有生成类型声明文件,我们在使用自己开发的组件库的时候才能获得更好的开发体验。
之所以写下这篇文章,是因为自己在使用father-build建设内部组件库的过程中,遇到了一些问题且难以找到相关文档,将自己的经验总结下来希望看到这篇文章的人能避开这些坑,更加顺利地搭建好自己的前端组件库。
package.json
其中,main指定了入口文件,module对应es module的输出,types对应你的typings文件,这样在组件在被使用的时候编辑器才能识别出你的组件类型声明
.fatherrc.js 配置father build打包方式, 具体详情可以参考 umijs/father
tsconfig.json typescript的配置文件,注意只有declaration设置为true才能生成.d.ts后缀的文件
接下来我们在components目录创建第一个自己的组件,下面是一个button的例子:
样式文件可以直接使用less编写
然后在入口文件index.ts将其导出,暴漏给外部使用。
使用文档的后缀名为".mdx", 语法与markdown类似,更多详情参考 docz 的文档
我们可以执行 yarn start ,来实时查看文档的效果。
现在命令行执行 yarn build 即可对组件库进行打包了,注意我们在.fatherrc中配置了esm和cjs两种打包方式,对应会生成 es 和 lib两个目录,其中 esm对应的是 es目录,cjs对应lib目录。
正常情况下,在的es和lib目录下应该已经为我们写的ts源码自动生成了“.d.ts”后缀的类型声明文件,如果没有生成,请仔细对比.fatherrc.js和tsconfig.json这两个配置文件,另外还要注意的是,如果我们基于antd封装业务组件库的话,不要在组件库中使用css module,否则也会造成无法自动产生类型声明文件的问题。
文章未能详尽部分,可以参考这个demo的github源码地址: https://github.com/xitengfei/xui-components , 有问题欢迎批评指正。
<util:property-path id="property-path" path="helloWorld.hello"/>/bin/arch = unknown
/usr/bin/arch -k = unknown
/usr/convex/getsysinfo = unknown
/usr/bin/hostinfo = Mach kernel version:
Darwin Kernel Version 11.4.0d1: Fri May 18 16:05:31 EDT 2012root:xnu-1699.26.8/BUILD/obj//RELEASE_I386
Kernel configured for up to 4 processors.
4 processors are physically available.
4 processors are logically available.
Processor type: i486 (Intel 80486)
Processors active: 0 1 2 3