从零使用TypeScript开发项目打包发布到npm


Posted in Javascript onFebruary 14, 2020

前言

typescript作为未来前端开发的主流框架,在前端开发的过程中也会越来越主要,相信这篇文章会对你有很大的帮助!

开发环境搭建

创建ming-npm-package文件夹

我在桌面上创建了一个ming-npm-package的文件夹,然后在编辑器里面打开

初始化项目

npm init

通过npm init 初始化项目来创建用户package.json文件

也可以npm init -y 这个是使用的默认的配置,我个人使用的是npm init

设置配置项

package name: (ming-npm-package)
version: (1.0.0)
description: use ts
//这下边的entry point: 这个是指定的最后使用的文件,而不是编译文件
entry point: (index.js) ./dist/ming-npm-package.js
test command:
git repository:
keywords: typescript
author: xiaoming
license: (ISC) MIT
About to write to C:\Users\明\Desktop\ming-npm-package\package.json:

{
 "name": "ming-npm-package",
 "version": "1.0.0",
 "description": "use ts",
 "main": "./dist/ming-npm-package.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [
  "typescript"
 ],
 "author": "xiaoming",
 "license": "MIT"
}


Is this OK? (yes)

这就是我设置的配置项,没问题就可以输入yes然后回车了

从零使用TypeScript开发项目打包发布到npm

创建tsconfig.json文件

tsc --init

就会生成一个tsconfig.json文件

修改tsconfig.json默认文件

把这两个注释打开

"declaration": true, //打包之后是否生成声明文件

"outDir": "./dist", //输出文件

添加exclude,忽略dist文件

在打包的时候会排除这里面指定的路径文件

"exclude": [
  "./dist"
 ]

安装依赖

npm install typescript -D

开始编码

创建ming-npm-package.ts文件

用来编写功能

const arrayMap = (array: [], callback:(item: any,index: number, arr: any[]) => any): any => {
  let i = -1
  const len = array.length
  let resArray = []
  while (++i < len){
    resArray.push(callback(array[i],i,array))
  }
  return resArray
}
export = arrayMap

对代码进行编译

tsc

此时我们的项目就会多了一个dist目录

从零使用TypeScript开发项目打包发布到npm

登录npm

大家没有npm账号的可以注册一个

这个是网址

https://www.npmjs.com

然后在编辑器终端里面输入

npm login

接着就会出来用户名、密码、邮箱这些依次填一下

从零使用TypeScript开发项目打包发布到npm

创建.npmignore文件

在项目根目录里创建一个.npmjgnore

这个其实和.gitignor差不多,就是你发npm包的时候,希望哪些文件或者文件夹不发到这个npm上

这里不用写的node_modules,这是默认忽略的

从零使用TypeScript开发项目打包发布到npm

版本号

在package.json里面版本号,
每发布一次都要修改一下

从零使用TypeScript开发项目打包发布到npm

发布

npm publish

发布成功

从零使用TypeScript开发项目打包发布到npm

安装使用

我们把package.json文件里面的name改成:
ming-npm

从零使用TypeScript开发项目打包发布到npm

目的是 我们要安装的包不能和package.json里面的包名字是一样的

然后再安装一下我们这个包:

npm install ming-npm-package@1.0.1

跟其他的包一样 npm install 包名

安装成功:

从零使用TypeScript开发项目打包发布到npm

再次发布

如果需要再次发布一定要改个版本号,改成之前的名字

然后再tsc对代码进行编译

npm publish 进行发布

源码

这个是我的代码

https://github.com/shifengming/ming-npm-package

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 #Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 #Javascript
Angular之jwt令牌身份验证的实现
Feb 14 #Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 #Javascript
JS实现简易计算器
Feb 14 #Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 #Javascript
node.js中npm包管理工具用法分析
Feb 14 #Javascript
You might like
Apache设置虚拟WEB
2006/10/09 PHP
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
PHP clearstatcache()函数详解
2010/03/02 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
python实现的生成word文档功能示例
2019/08/23 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
岗位说明书范文
2014/05/07 职场文书
学校食品安全责任书
2015/01/29 职场文书
行政文员岗位职责
2015/02/04 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL