npm 开源项目构建与发布

引言

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

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

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

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

开源

一个好的前端开源项目

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

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

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

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

开发

进入开发阶段，因为IE和Firefox的存在，记住不要啥api都用。

能用ts就别用js，能用类就别any。

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

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

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

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);

发布哪些文件

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

其他的需要发布的文件，需要在package.json的files中引入。

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

发布

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

How to publish packages to npm

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

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

选择本次发布的版本。

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

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

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

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

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

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

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

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

总结

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