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

 更新时间:2020年02月14日 10:17:17   作者:石小明  
这篇文章主要介绍了从零使用TypeScript开发项目打包发布到npm,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

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然后回车了

创建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目录

登录npm

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

这个是网址

https://www.npmjs.com

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

npm login

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

创建.npmignore文件

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

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

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

版本号

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

发布

npm publish

发布成功

安装使用

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


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

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

npm install ming-npm-package@1.0.1

跟其他的包一样 npm install 包名

安装成功:

再次发布

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

然后再tsc对代码进行编译

npm publish 进行发布

源码

这个是我的代码

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

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

相关文章

  • window.location和document.location的区别分析

    window.location和document.location的区别分析

    用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象
    2008-12-12
  • 微信小程序-横向滑动scroll-view隐藏滚动条

    微信小程序-横向滑动scroll-view隐藏滚动条

    本篇文章主要介绍了微信小程序-横向滑动scroll-view隐藏滚动条的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • JavaScript如何将base64图片转化为URL格式

    JavaScript如何将base64图片转化为URL格式

    这篇文章主要给大家介绍了关于JavaScript如何将base64图片转化为URL格式的相关资料,Base64是一种编码方式,而不是真正的加密方式,即使算Base64也仅用作一个简单的加密来保护某些数据,而真正的加密通常都比较繁琐,需要的朋友可以参考下
    2023-07-07
  • js实现水平和竖直滑动条

    js实现水平和竖直滑动条

    这篇文章主要为大家详细介绍了js实现水平和竖直滑动条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • JS动态添加iframe的代码

    JS动态添加iframe的代码

    这篇文章主要介绍了JS动态添加iframe的代码,需要的朋友可以参考下
    2015-09-09
  • javascript或asp实现的判断身份证号码是否正确两种验证方法

    javascript或asp实现的判断身份证号码是否正确两种验证方法

    在网页中经常需要输入正确的身份证号码,只能通过程序来验证身份证格式。根据身份证号码生成的原理,就是验证后面几位就可以了。
    2009-11-11
  • js中apply和call的理解与使用方法

    js中apply和call的理解与使用方法

    这篇文章主要给大家介绍了关于js中apply和call的理解与使用方法,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-11-11
  • 对JavaScript中this指针的新理解分享

    对JavaScript中this指针的新理解分享

    这篇文章主要介绍了对JavaScript中this指针的新理解分享,本文讲解了方法调用模式、函数调用模式、构造函数调用模式、Apply调用模式中的this指针理解,需要的朋友可以参考下
    2015-01-01
  • 详细总结Javascript中的焦点管理

    详细总结Javascript中的焦点管理

    相信大家都知道焦点作为javascript中的一个重要功能,基本上和页面交互都离不开焦点。但却少有人对焦点管理系统地做总结归纳。本文就javascript中的焦点管理作详细介绍,有需要的朋友们可以参考借鉴。
    2016-09-09
  • 每天一篇javascript学习小结(Function对象)

    每天一篇javascript学习小结(Function对象)

    这篇文章主要介绍了javascript中的Function对象知识点,对Function对象的基本使用方法,以及各种方法进行整理,感兴趣的小伙伴们可以参考一下
    2015-11-11

最新评论