用 TypeScript 编写 npm 模块

2020-04-14 09:42:47

参考地址 用 TypeScript 编写 npm 模块

背景

自从开始使用 Node.js 已经一年多,写的代码越多,越是觉得自己提高的越慢。想来应该有没有将单一功能的代码封装在一个独立模块,而导致代码稍微多一点就维护困难的原因。

目标

最终目标

使用 TypeScript 编写一个 npm 模块,功能是通过 Express 中间件的形式对访问接口的用户进行操作鉴权。

目标分解

花了一下午的时间,想直接达到上面的最终目标,但是最后还是失败了。之前也经常会犯这样的错误,就是主观上不能接受自己能力差的事实,一次性目标定的太高,无法完成,心情低落,然后放弃。但我这次偏偏不放弃,而且以后也要吸取这次的教训。我这次把目标分解成一个个可以容易达到的小目标。

  • 用普通的 JavaScript 写一个最简单的 npm 模块;

  • 将刚才的 npm 模块加上一个 TypeScript 定义文件,使得 TypeScript 项目可以直接使用;

  • 使用 TypeScript 编写刚才的模块;

  • 使用 TypeScript 编写最终的功能模块;

用普通的 JavaScript 写一个最简单的 npm 模块

npm init 命令正常初始化一个项目,然后在 index.js 文件里编写如下内容。

exports.printMSG = function() {
  console.log('This message is from my npm module.');}

然后就可以直接发布在 npm 上了,前提是在 npm 上注册好了用户信息。

如果 npm 的仓库更换成立例如淘宝仓库等的其他仓库的话,需要先修改回 npm 官方仓库。

# npm config set registry https://registry.npmjs.org/

$ npm adduser # 添加 npm 用户信息$ npm config ls # 查看 npm 配置信息$ npm publish

就这样,一个全新的 npm 就发布上去了,就这样,一个小目标就先实现了。

原 npm 模块加上一个 TypeScript 定义文件

接着,再给这个 npm 模块加上一个 TypeScript 的说明文件,在项目根目录下建立一个 npm-js-demo.d.ts文件(任意名字都可以)。重要的是下一步,在 package.json 文件中加入以下一行,指明声明文件的位置。

"types": "npm-js-demo.d.ts"

然后修改版本号,再次发布。

$ npm version patch # 增加 patch 版本号,修改以后是 0.0.2$ npm publish

然后再建立一个新的项目,安装刚刚升级的 npm 模块做为依赖,即可以在项目中正常使用了。

import * as njd from 'node-js-demo';njd.printMSG();

增加辅助文件和内容

然后增加一些辅助的内容和文件,以便发布 npm 模块的时候屏蔽一些本地的设置或临时文件,

  • 增加 .gitignore 文件(如果没有 .npmignore 文件则默认使用该文件);

  • 增加 .npmignore 文件(可以覆盖 .gitignore 文件的设置);

  • 在 package.json 文件中增加 keywordsauthorrepository 等键值;

发布 npm 模块之前的本地化测试

为了防止发布的 npm 模块有问题而无法使用,应该首先在本地进行安装使用测试,具体流程如下,

在 npm-js-demo 项目下,运行命令。

npm install . -g

然后再其他测试项目中进行测试,

$ cd ../some-other-folder
$ npm install ../npm-js-demo

参考资料



  • 2020-11-23 08:52:59

    asm.js 和 Emscripten 入门教程

    asm.js 就是为了解决这两个问题而设计的:它的变量一律都是静态类型,并且取消垃圾回收机制。除了这两点,它与 JavaScript 并无差异,也就是说,asm.js 是 JavaScript 的一个严格的子集,只能使用后者的一部分语法。

  • 2020-11-23 09:11:07

    爬虫——记一次破解前端加密详细过程

    从最初使用webdriver+selenium爬虫到现在利用http请求解析html,经历过各种各样的问题,webdriver+selenium这种办法虽然万能,而且可以用JS写解析脚本方便调试,

  • 2020-11-24 19:18:43

    nuxtjs打成用于webview的相对路径

    路径为绝对路径,当项目的域名为二级域名的时候,就不能打包为这绝对路径了。 nuxt不同于vue项目,思索了许久,终于找到了配置的地方

  • 2020-11-24 23:22:59

    eruda,移动端网页调试神器

    webapp或者移动端网页需要嵌入到app时候,尤其是在APP内置的webView上加载我们的页面,想要查看手机浏览器信息是非常困难的事,当出现问题的时候,你又不能查看日志,一般会连接本地测试环境,然后在alert来打印日志

  • 2020-11-30 09:04:02

    js中set和get方法

    1. get和set是方法,因为是方法,所以可以进行判断 2. get一般是要返回的;而set是设置,不用返回 3. 如果调用对象内部的属性约定的命名方式是变量名前加_