自定义npm包——typeScript版本
前言
这篇文章是在我之前的文章 [自定义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版本的更多相关文章
- 自定义npm包的创建、发布、更新和撤销
大纲 1.准备2.自定义npm包3.发布自定义npm包4.引用npm包5.更新npm包6.撤销发布的npm包 简书原文 https://www.jianshu.com/p/d737bc5df5b7 1 ...
- npm 包 升降版本
今天用vue-awesome-swiper最新版本遇到些问题,需要调整到2.6.7版本.记录以下. 查看vue-awesome-swiper版本 npm list vue-awesome-swiper ...
- nvm管理node之后,安装npm包出现的问题
在学习Node.js连接MySQL时,使用nvm安装node6.10.0,在项目目录下npm install mysql 出问题. 在查询解决方法后,得知是因为配置文件有问题 package.json ...
- 在2018年如何优雅的开发一个typescript语言的npm包?
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由小明plus发表 很多时候,我们可能想要用 typescript 语言来创建一些模块,并提交到 npm 供别人使用, 那么在 2018 ...
- npm 如何查看一个包的版本信息?
转载. https://blog.csdn.net/cvper/article/details/79543262 有了npm 我们能够简单的一段代码就下载我们需要的包,但是包是不断更新的, 所以我们要 ...
- npm 查看一个包的版本信息
有了npm 我们能够简单的一段代码就下载我们需要的包,但是包是不断更新的, 所以我们要关注包的版本信息: 现在,假设我们需要 jquery ,但是jquery现在有很多版本,我们如何通过npm查看呢? ...
- 开发并发布npm包,支持TypeScript提示,rollup构建打包
前言: 工作了几年,想把一些不好找现成的库的常用方法整理一下,发布成npm包,方便使用.也学习一下开发发布流程. 主要用到的工具:npm. 开发库:babel.typescript.rollup.es ...
- Node.js_简介及其 npm 包管理器基本使用_npm_cnpm_yarn_cyarn
Node.js 既是语言也是平台,跳过了 Apache.Nginx 等 HTTP 服务器,直接面向前端开发 JavaScript 是由 ECMAScript.文档对象模型(DOM)和浏览器对象模型(B ...
- 了解可执行的NPM包
NPM是Node.js的包管理工具,随着Node.js的出现,以及前端开发开始使用gulp.webpack.rollup以及其他各种优秀的编译打包工具(大多数采用Node.js来实现),大家都开始接触 ...
随机推荐
- MyReport.Form表单引擎
MyReport.Form表单引擎.主要提供表单模板的设计以及表单模板的预览填报等功能集合. 支持文本框.选择框.数字框.日期框.图片框.组合框.弹出框等经常使用控件. watermark/2/tex ...
- html5中的空格符
html5中的空格符 1,Html中空格 不断行的空白(1个字符宽度) 半个空白(1个字符宽度) 一个空白(2个字符宽度) 窄空白(小于1个字符宽度) 2,Css ...
- POJ 3039 搜索??? (逼近)
思路: 抄的题解 这叫搜索? 难以理解 我觉得就是枚举+逼近 //By SiriusRen #include <cmath> #include <cstdio> #includ ...
- Active Data Guard
ADG INTRODUCE Active Data Guard(ADG)是ORACLE 11g企业版的新特性,需要单独的License.可以打开Physical standby至read only模式 ...
- LuoguP3254 圆桌问题(最大流)
题目描述 假设有来自m 个不同单位的代表参加一次国际会议.每个单位的代表数分别为ri (i =1,2,……,m). 会议餐厅共有n 张餐桌,每张餐桌可容纳ci (i =1,2,……,n)个代表就餐. ...
- 洛谷 P2242 公路维修问题
P2242 公路维修问题 题目描述 由于长期没有得到维修,A国的高速公路上出现了N个坑.为了尽快填补好这N个坑,A国决定对M处地段采取交通管制.为了求解方便,假设A国的高速公路只有一条,而且是笔直的. ...
- Windows 98 二十岁了,这些功能都是从它开始的(虽然 Windows 98 不如 Windows 95 那样具有革命性,但完成度更高,更加成熟。到最后还是:相见不如怀念。)
1998 年 6 月 25 日午夜,美国著名连锁零售店 CompUSA 门外挤满了狂热的消费者和媒体,他们在等待一款软件发售:Windows 98,即使明知它要到当天早上才正式上市. ▲ 在 Comp ...
- eclipse- MAT安装及使用
1.安装eclipse mat插件 1)查看当前eclipse版本 进入eclipse目录:右击eclipse图标,看到安装目录/home/zhangshuli/adt-bundle-linux-x8 ...
- [NOI.AC#34]palinedrome 字符串hash+贪心
容易看出,只要从两边往中间扫描,碰到相等的就直接分割然后加入答案即可,判断相等用字符串hash #include<bits/stdc++.h> #define REP(i,a,b) for ...
- Java学习笔记九
GUI:图形用户界面,Java不常用于创建桌面应用,所以用的比较少 一.概述: 二.Frame演示: 三.事件监听机制 import java.awt.Button; import java.awt. ...