从零使用TypeScript开发项目打包发布到npm_javascript技巧

来源:脚本之家  责任编辑:小易  

TypeScript 是一种由微软开发的自由和开源的编程语言,它是JavaScript的一个超集,扩展了JavaScript的语法。TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译www.zgxue.com防采集请勿采集本网。

前言

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

4.安装了ts后,就会有2个命令可用:tsc和tsd,tsc用来编译TypeScript代码,tsd用来下载第三方js类库的ts定义文件(或者叫头文件),熟练使用tsd,工作效率提升,因为减少了80%查文档的时间,所以写ts可以说是

开发环境搭建

安装好定义文件之后,如果使用Visual Studio Code等对TypeScript支持较好的编辑器,则会提供更加强大的代码提示功能。使用Webpack构建 TypeScript编译器支持很多模块组织规范,如ES6、commonJS、AMD等,

创建ming-npm-package文件夹

如果你是用ruby才会考虑抄coffeescript 如果只是node.js就可以用typescript nodejs的使用去官网看一看就懂了,不过记知住node.js是服务器端语言,不是服务器。什么静态文件访问、道cookie啊

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

1.1、首先找到TypeScript的安装目录,我的在”C:\\Program Files(x86)\\Microsoft SDKs\\TypeScript\\1.0。1.2、使用cmd工具命令cd到安装目录。1.3、输入命令:tsc 文件名.ts,回车编译。一旦编译成功,就会在

初始化项目

另一种方式就是直接使用 TypeScript 提供的 Tuple 类型: let error:[number,string]=[123,'Some Message'];在 TypeScript 的类型标注中,当我们把类型写在方括号之前,就是 Typed Array,当类型写在方

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.jstest command:git repository:keywords: typescriptauthor: xiaominglicense: (ISC) MITAbout 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

TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集。JavaScript 和 TypeScript 的主要差异:1、TypeScript 可以使用 JavaScript 中的所有代码和编码概念,TypeScript 是为了使 JavaScript 的开发变得更加容易而创建的。例如,TypeScript 使用类型和接口等概念来描述正在使用的数据,这使开发人员能够快速检测错误并调试应用程序2、TypeScript 从核心语言方面和类概念的模塑方面对 JavaScript 对象模型进行扩展。3、JavaScript 代码可以在无需任何修改的情况下与 TypeScript 一同工作,同时可以使用编译器将 TypeScript 代码转换为 JavaScript。4、TypeScript 通过类型注解提供编译时的静态类型检查。5、TypeScript 中的数据要求带有明确的类型,JavaScript不要求。6、TypeScript 为函数提供了缺省参数值。7、TypeScript 引入了 JavaScript 中没有的“类”概念。8、TypeScript 中引入了模块的概念,可以把声明、数据、函数和类封装在模块中内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 解决vue cli使用typescript后打包巨慢的问题
  • 微信小程序picker组件下拉框选择input输入框的实例
  • javascript实现点击按钮切换网页背景色的方法
  • 中级前端工程师必须要掌握的27个javascript 技巧(干货总结)
  • vue编程式跳转的实例代码详解
  • javascript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒
  • js 设置cookie 有效期 检测cookie
  • js控制文本框禁止输入特殊字符详解
  • javascript中push(),join() 函数 实例详解
  • js实现焦点图轮播效果的方法详解
  • js实现获取图片大小和预览的方法完整实例【兼容ie和其它浏览器】
  • TypeScript 和 JavaScript 的区别
  • 零基础编程语言,初学选Typescript应该从哪里开始学习呢?
  • 如何启动typescript编辑器
  • typescript 怎么使用unescape函数
  • 如何学习用Typescript写Reactjs
  • 怎么用typescript做网页
  • 如何看待 Angular 2.0 使用的 AtScript 是 TypeScript 的超集
  • 如何编译TypeScript
  • 如何用 TypeScript 提高 JS 工程的健壮性
  • 如何看待 Angular 2.0 使用的 AtScript 是 TypeScript 的超集
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧解决vue cli使用typescript后打包巨慢的问题微信小程序picker组件下拉框选择input输入框的实例javascript实现点击按钮切换网页背景色的方法中级前端工程师必须要掌握的27个javascript 技巧(干货总结)vue编程式跳转的实例代码详解javascript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒js 设置cookie 有效期 检测cookiejs控制文本框禁止输入特殊字符详解javascript中push(),join() 函数 实例详解js实现焦点图轮播效果的方法详解js实现获取图片大小和预览的方法完整实例【兼容ie和其它浏览器】js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的javascript深入理解js闭包js删除数组里的某个元素方法javascript中 try catch用法js中利用tagname和id获取元素的方法javascript最基本的函数汇总利用javascript移动div层-javascript 拖动js左侧三级菜单导航实例代码js简单实现移动端日历功能示例基于slideout.js实现移动端侧边栏滑动特效javascript实现去除html标签的方法js 获取范围内的随机数实例代码ie与firefox在javascript上的7个不同句法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved