前言

这篇文章是在我之前的文章 [自定义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. shape-自绘制简单图形

    shape 可以绘制简单的图形,颜色等.它主要就是应用于selector 的一些状态. 本文内容参考自http://www.cnblogs.com/cyanfei/archive/2012/07/27 ...

  2. powershell《语音报警系统》

    用powershell实现:“倩女幽魂姥姥”版<语音报警系统> ------[第一章 前言]------ win7,及以上版本中,是自带语音库的,系统自带一套女声中文库,一套女声英文库.用 ...

  3. js---- localStorage的基本用法

    <body> <div> <span>用户名</span> <input type="text" class='usernam ...

  4. PS:切图

    1.从psd中获取资源 2.基本了解 3.简单的图片操作和调整 4.对自己的审美提高一.界面设置: 1.新建设置:ctr+n; 预设:Web,大小Web(1920*1080) 背景:透明 2.移动工具 ...

  5. groupdel---删除指定的工作组

    groupdel命令 groupdel命令用于删除指定的工作组,本命令要修改的系统文件包括/ect/group和/ect/gshadow.若该群组中仍包括某些用户,则必须先删除这些用户后,方能删除群组 ...

  6. CSUOJ 1554 SG Value

    1554: SG Value Time Limit: 5 Sec  Memory Limit: 256 MBSubmit: 140  Solved: 35 Description The SG val ...

  7. Java生产者与消费者(下)

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 上一讲我们让消费者和生产者都各停1毫秒,实际上大多并不是这样的.第二讲,我们讲一个极端的例子和一个正 ...

  8. 将已有的Eclipse项目转化为Maven项目

    将已有的Eclipse项目转化为Maven项目 我们之前在Eclipse IDE完成的Java命令行项目.Java Web项目也使用了构建工具--Ant,它帮助我们编译.运行Java源代码(无需我们自 ...

  9. [PWA] Deal with caches in PWA

    The takeway is to know when we should cache the content? When we should clean the caches? 1. When sh ...

  10. Android学习笔记技巧之给文本加边框

    BorderTextViews.Java package xiaosi.BorderTextView; import android.content.Context; import android.g ...