npm 开源项目构建与发布

引言

公式录入模块,起初采用开源的tinymce-mathjax插件。

image.png

使用过程中发现不易于公式录入,期待快捷录入方案。

遂启动了自研插件的计划,在开发的过程中发现,做个开源真难。

特地去Github把组织名改了,I'm spent.,我太难了。

image.png

开源

一个好的前端开源项目

后端的项目我们一直在移植Spring官方的方式。

那一个好的前端开源项目长什么样呢?去看看前端老大React吧!facebook/react - Github

image.png

除了其他与开发有关的部分,文档方面我只维护了必备的版本变更(CHANGES 或 CHANGELOG)、开源协议(LICENSE)、项目介绍(README)

CHANGES # 各版本变动信息
LICENSE # 开源协议
README  # 项目介绍

开发

进入开发阶段,因为IEFirefox的存在,记住不要啥api都用。

能用ts就别用js,能用类就别any

不怪说从切图仔到写框架都是前端,好的项目是真好,次的项目是真次,令人害怕。

  1. js项目,这个startup对象是啥啊?最开始没找到mathjax怎么结合ts
  2. ts项目类型错误,这个提示怎么和文档不一样啊?(@type/mathjax)的类型仍然是旧版本的
  3. 文档写得objecttsany,这个api应该传个啥啊?
  4. xxx.min.js第一行报错,点开全是abcd,这怎么整啊?

经历了重重困难终于开发完成,完成了第一版的功能,仅公式录入。

image.png

MathJax

说一下在使用mathjax时自己的一些理解,最开始就掉进官方文档的坑里了,官方文档是MathJax.typeset()实现渲染,导致我误认为渲染document就需要引入mathjax文件,在iframe里通过创建script标签的方式动态引入mathjax

后来发现完全不必要,这样还给插件的使用者造成负担。

需要用户提供一个MathJax的环境即可,不需要重复在iframe引入,其实渲染,不过是将符合格式的公式内容渲染为svg矢量图。

const mathJax = MathJaxHolder.getMathJax();
const options = mathJax.getMetricsFor(el, true);
const node = mathJax.tex2svg(latex, options);

发布哪些文件

这是发布前需要确定的问题,经测试CHANGESLICENSEREADME.md等这些项目必备的会被npm默认包括进来。

其他的需要发布的文件,需要在package.jsonfiles中引入。

image.png

ts项目,只发布编译之后的js代码。

发布

发布有两种方式,一种手工方式,一种自动方式,因手工发布方式较复杂,推荐使用自动化工具np

How to publish packages to npm

发布前的准备:更新版本记录。

image.png

使用np命令开始发布,当前是1.0.5版本,列出从上次发布到现在的所有Git提交。

image.png

选择本次发布的版本。

image.png

之后会自动执行一系列任务,等待。

image.png

发布的时候需要输入OTP/One Time Password一次性密码。

image.png

此处的OTP是使用Authenticator应用扫描npm官方提供的二维码后生成的时效性密码,每30秒变更一次,且密码只能用一次。

image.png

大致原理就是扫码,客户端获取到密钥,然后密码是根据密钥和时间戳计算出来的,类似QQ安全中心。

image.png

发布的时候比较慢,受限于网络,耐心等待。出现类似tinymce-latex 1.0.6 published.这种的发布成功的提示语即证明发布成功。

image.png

发布后,package.json文件中的版本信息工具帮我们自动修改。

image.png

同时,np自动帮我们发布在Github上发布了一个v1.0.6RELEASE版本。

image.png

打开npm官网,可以看到新版本已经发布成功。

image.png

总结

在这个文档不健全的前端时代,类型和注释的限制很重要。

阅读 740

推荐阅读
Tomorrow
用户专栏

明天,你好

316 人关注
136 篇文章
专栏主页