前言

这篇文章是在我之前的文章 [自定义npm包的创建、发布、更新和撤销] 的基础上做的扩展,主要是针对如何创建以及发布一个typeScript语言的npm包。

大纲

1、创建关于typeScript的npm包
2、往npm包中添加一些内容
3、对package.json进行配置
4、发布
5、创建使用案例
6、优化

简书原文

https://www.jianshu.com/p/fbbaa379bced

1、创建关于typeScript的npm包

1.1、创建npm包

执行: npm init -y
获得一个默认的package.json

1.2、添加typeScript依赖

执行: npm install typescript
添加typeScript的依赖包到npm包中

1.3、配置tsconfig.json

创建一个tsconfig.json文件,并添加一些配置(如果没有这个配置文件,typeScript编译的时候就是根据默认的配置执行)

//tsconfig.json配置如下:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"declaration": true,
"outDir": "./dist",
"strict": true
}
}

根据上述步骤执行结束,你会获得如下图的文件目录

2、往npm包中添加一些内容

2.1、向npm中添加一些内容

/* src/tookit.ts */
export class Toolkit {
printSomething() {}
} /* index.ts */
import { Toolkit } from "./toolkit";
export { Toolkit };

2.2、执行tsc进行编译,最终你会得到如下图

3、对package.json进行配置

1、修改npm包入口
2、配置该npm包的typeScript声明文件

4、发布

执行:
npm adduser(如果已经登录过可以不用执行)
npm publish

5、创建使用案例

发布了自己的npm包之后当然就是使用了,不能使用的npm包没有意义

5.1、创建案例

npm init -y

5.2、添加自定义的npm包的依赖

npm install npm-tsc

5.3、调用自定义的npm包并使用

//index.ts
import { Toolkit } from "npm-tsc";
let tk = new Toolkit();
tk.printSomething();

5.4、编译并执行

执行:
tsc index.ts
node index.js

6、优化

综上已经完成了一个使用typeScript语言写成的npm简单包,我们可以对当前的npm包进行优化
1、一般npm包只会上传编译后的js文件以及声明文件,因此我们需要把ts文件删除
2、删除ts文件的同时要记得把npm包中的tsconfig.json文件一同删除了
3、修改版本号并发布

更新依赖包重新编译执行,检测是否存在问题

自定义npm包——typeScript版本的更多相关文章

  1. 自定义npm包的创建、发布、更新和撤销

    大纲 1.准备2.自定义npm包3.发布自定义npm包4.引用npm包5.更新npm包6.撤销发布的npm包 简书原文 https://www.jianshu.com/p/d737bc5df5b7 1 ...

  2. npm 包 升降版本

    今天用vue-awesome-swiper最新版本遇到些问题,需要调整到2.6.7版本.记录以下. 查看vue-awesome-swiper版本 npm list vue-awesome-swiper ...

  3. nvm管理node之后,安装npm包出现的问题

    在学习Node.js连接MySQL时,使用nvm安装node6.10.0,在项目目录下npm install mysql 出问题. 在查询解决方法后,得知是因为配置文件有问题 package.json ...

  4. 在2018年如何优雅的开发一个typescript语言的npm包?

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由小明plus发表 很多时候,我们可能想要用 typescript 语言来创建一些模块,并提交到 npm 供别人使用, 那么在 2018 ...

  5. npm 如何查看一个包的版本信息?

    转载. https://blog.csdn.net/cvper/article/details/79543262 有了npm 我们能够简单的一段代码就下载我们需要的包,但是包是不断更新的, 所以我们要 ...

  6. npm 查看一个包的版本信息

    有了npm 我们能够简单的一段代码就下载我们需要的包,但是包是不断更新的, 所以我们要关注包的版本信息: 现在,假设我们需要 jquery ,但是jquery现在有很多版本,我们如何通过npm查看呢? ...

  7. 开发并发布npm包,支持TypeScript提示,rollup构建打包

    前言: 工作了几年,想把一些不好找现成的库的常用方法整理一下,发布成npm包,方便使用.也学习一下开发发布流程. 主要用到的工具:npm. 开发库:babel.typescript.rollup.es ...

  8. Node.js_简介及其 npm 包管理器基本使用_npm_cnpm_yarn_cyarn

    Node.js 既是语言也是平台,跳过了 Apache.Nginx 等 HTTP 服务器,直接面向前端开发 JavaScript 是由 ECMAScript.文档对象模型(DOM)和浏览器对象模型(B ...

  9. 了解可执行的NPM包

    NPM是Node.js的包管理工具,随着Node.js的出现,以及前端开发开始使用gulp.webpack.rollup以及其他各种优秀的编译打包工具(大多数采用Node.js来实现),大家都开始接触 ...

随机推荐

  1. 第8章7节《MonkeyRunner源代码剖析》MonkeyRunner启动执行过程-小结

    最后我们对MonkeyRunner启动的过程做一个总结,当然,当中也包括启动Monkey,尽管它不属于启动过程的一部分: monkeyrunner这个shell脚本会先设置一些执行环境的系统属性保存到 ...

  2. Material Design控件使用学习 toolbar+drawerlayout+ Snackbar

    效果 1.,导包design包和appcompat-v7 ,设置Theme主题Style为NoActionbar 2.custom_toolbar.xml <?xml version=" ...

  3. 关于li的排列,我的面试题

    来到北京的第二周,收到了单位的面试,一面的时候面试官问了微信钱包里的那个快速入口的排列,我当时在面试官的引导下答的还可以,但是在实际中有很多的方法和各自不同的问题,我来总结下. 1.flex布局,其实 ...

  4. OpenCV —— 摄像机模型与标定

    这种理论看的已经够多了,感觉应用价值不大(矫正畸变图像还凑合,用摄像机测距神马的...) 有始有终吧,简单把内容梳理一下 针孔  摄像机模型 —— 过于理想(不能为快速曝光收集足够的光线) 透镜可以聚 ...

  5. 小米开源便签Notes-源码研究(0)-整体功能介绍(图文并茂)

    本周对小米开源文件管理器,做了整体的研究,大致弄清了源码的来龙去脉,剩下的就是重点研究几个活动的流程了. 讲解Android应用这种可视化的程序,感觉还是有图比较好,不然功能界面都不清楚,自己不好介绍 ...

  6. cmd 批处理制作

    新建个记事本abc.txt,把下面的内容复制到记事本d:cd d:\a\b\cdir d:\a\b\ccmd复制完成后并保存,把文件的后缀名.txt改为.bat变成一个批处理即abc.bat

  7. UVALive 5583 Dividing coins

    Dividing coins Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVALive. Ori ...

  8. cogs P1578【模板】 次小生成树初级练习题

    1578. 次小生成树初级练习题 ☆   输入文件:mst2.in   输出文件:mst2.out   简单对比时间限制:1 s   内存限制:256 MB [题目描述] 求严格次小生成树 [输入格式 ...

  9. home.pl 正在促销,一些域名免费(终止于2017.4.4)

    home.pl 正在促销,一些域名免费(终止于2017.4.4) home.pl 成立于1997年,是波兰顶尖的互联网服务公司.专注于域名登记,托管网站,保持电子邮件帐户等.  home.pl 正在促 ...

  10. js---15,模拟数组的ecah方法

    原型的另外一个作用就是扩展对象中的属性和方法的 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http:// ...