用 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

参考资料



  • 2019-05-21 12:34:38

    浅谈Recycleview嵌套卡顿 以及你所不知道的解决方案

    由于项目需要,需要做到recycleview 这里先不讲如何用其他控件代替这种嵌套的方式 先假定你已经嵌套了 老板还不给时间给你给布局方式 那么这个时候你的这个嵌套列表 必定是卡顿的 只要超过一屏,展示效果会有卡顿现象,原因就是由于两个RecyclerView的存在,使得滑动的view滑出当前屏幕的释放存在冲突

  • 2019-05-21 12:35:54

    RecyclerView setHasFixedSize(true)的意义

    设置为true,再调用notifyDataSetChanged(),发现大小重新计算了,看来理解出现错误了。还是再看一下哪些地方用到这个mHasFixedSize吧。

  • 2019-05-21 12:37:34

    RecyclerView 刷新闪烁

    闪烁是 notifyDataSetChange 造成的。由于适配器不知道整个数据集中的哪些内容已经存在,在重新匹配 ViewHolder 时发生的。 当然,遇到这个问题时有去搜索一些答案,看到的很多都是去禁止 RecycleView 的默认动画,可惜这对我没什么用。下面的方法是对我有用的。

  • 2019-05-21 12:43:26

    (重要)RecycleView的缓存机制

    RecycleView的四级缓存是由三个类共同作用完成的,Recycler、RecycledViewPool和ViewCacheExtension。Recycler用于管理已经废弃或者与RecyclerView分离的ViewHolder,这里面有两个重要的成员,为可以看见的屏幕的内部缓存成员mAttachedScrap、mChangedScrap和滑出屏幕外的外部缓存成员mCachedViews二者共同完成ViewHolder的缓存;RecycledViewPool类是用来缓存整体所有的ViewHolder,是对mCachedViews缓存的补充;ViewCacheExtension是扩展内的缓存对象,默认不加载,需实现方法getViewForPositionAndType(Recycler recycler, int position, int type)来实现自己的缓存。接下来对四级缓存一步步介绍。

  • 2019-05-21 12:44:31

    对嵌套RecyclerView的优化

    RecyclerView 是一个更高级的 ListView ,它可以重用view避免额外创建太多的view从而带来流畅的滚动性能。RecyclerView通过叫做 View pool 的东西持有不再可见的 view ,让它可被回收

  • 2019-05-25 14:54:50

    commit your changes or stash them before you can merge

    Your local changes to the following files would be overwritten by merge:         protected/config/main.php Please, commit your changes or stash them before you can merge. --------------------- 作者:陈小峰_iefreer 来源:CSDN 原文:https://blog.csdn.net/iefreer/article/details/7679631 版权声明:本文为博主原创文章,转载请附上博文链接!