从零使用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

最后

希望看到文章的同学都有收获!

文章要是有不对的地方还望指正!

最后祝大家都越来越优秀!

欢迎大家加入,一起学习前端,共同进步!




原文链接:segmentfault.com

上一篇:websocket和ajax的区别
下一篇:Vue+ueditor坑中摸索

相关推荐

  • 项目中npm依赖问题

    最近开发遇到一个npm依赖导致的问题,报错如下。 经过错误定位,发现原因是项目中用了vue不同版本语法的写法,如下所示 ,重点关注的是被**包围的写法。 &lt;el-table-column ...

    2 年前
  • 面向对象不是银弹,DDD 也不是,TypeScript 才是

    要解决的问题是什么? A problem well-stated is Half-solved Fred Brooks 在著名的"No Silver Bullet - Essence and Acci...

    1 年前
  • 随记-npm

    npm npm是包管理器,方便开发人员分享,复用代码 用于搜索js模块/包的网站 npm服务器-可下载或上传安装包或命令行程序 npm仓库-存储安装包/安装模块 npm 安装 npm依赖于nod...

    6 个月前
  • 针对前端开发可重用组件并发布到NPM

    翻译:疯狂的技术宅 原文:https://www.smashingmagazine.... 本文首发微信公众号:jingchengyideng 欢迎关注,每天都给你推送新鲜的前端技术文章 摘要...

    2 年前
  • 重读《学习JavaScript数据结构与算法-第三版》-第2章 ECMAScript与TypeScript概述

    定场诗 八月中秋白露,路上行人凄凉; 小桥流水桂花香,日夜千思万想。 心中不得宁静,清早览罢文章, 十年寒苦在书房,方显才高志广。 前言 洛伊安妮·格罗纳女士所著的《学习JavaScript数据结构与...

    1 年前
  • 那些鲜为人知的 TypeScript 功能

    原文地址: medium.com/articode/so… 译文地址:github.com/xiao-T/note… 本文版权归原作者所有,翻译仅用于学习。 过去的几年中,TypeScript ...

    4 个月前
  • 通过示例演示 TypeScript 的高级类型

    原文地址: levelup.gitconnected.com/advanced-ty… 译文地址:github.com/xiao-T/note… 本文版权归原作者所有,翻译仅用于学习。

    5 个月前
  • 通过npm引用的vue组件使用详解

    什么是组件:组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。

    4 年前
  • 通用 TypeScript 项目结构与实践经验

    据说是 30 万行 TypeScript 项目实践干货?在多年的 TypeScript 项目开发过程中,我们曾多次改变项目结构以适应新增的项目拆分需求,最终形成了现有的通用项目结构。

    3 个月前
  • 透过 TDD 模式学习如何实现各种 npm 工具

    前言 在程序員的日常精進之中,閱讀優秀的代碼是必不可少的。透過 TDD 的開發模式,可以模仿那些優秀的代碼,從而提升自己代碼水平。下面介紹如何從零開始搭建 TDD 環境,並構建 isEven 代碼。

    2 年前

官方社区

扫码加入 JavaScript 社区