從零使用TypeScript開發(fā)項(xiàng)目打包發(fā)布到npm

前言

創(chuàng)新互聯(lián)公司從2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元嵩明做網(wǎng)站,已為上家服務(wù),為嵩明各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

typescript作為未來(lái)前端開發(fā)的主流框架，在前端開發(fā)的過程中也會(huì)越來(lái)越主要，相信這篇文章會(huì)對(duì)你有很大的幫助！

開發(fā)環(huán)境搭建

創(chuàng)建ming-npm-package文件夾

我在桌面上創(chuàng)建了一個(gè)ming-npm-package的文件夾，然后在編輯器里面打開

初始化項(xiàng)目

npm init

通過npm init 初始化項(xiàng)目來(lái)創(chuàng)建用戶package.json文件

也可以npm init -y 這個(gè)是使用的默認(rèn)的配置，我個(gè)人使用的是npm init

設(shè)置配置項(xiàng)

package name: (ming-npm-package)
version: (1.0.0)
description: use ts
//這下邊的entry point: 這個(gè)是指定的最后使用的文件，而不是編譯文件
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)

這就是我設(shè)置的配置項(xiàng)，沒問題就可以輸入yes然后回車了

創(chuàng)建tsconfig.json文件

tsc --init

就會(huì)生成一個(gè)tsconfig.json文件

修改tsconfig.json默認(rèn)文件

把這兩個(gè)注釋打開

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

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

添加exclude,忽略dist文件

在打包的時(shí)候會(huì)排除這里面指定的路徑文件

"exclude": [
  "./dist"
 ]

安裝依賴

npm install typescript -D

開始編碼

創(chuàng)建ming-npm-package.ts文件

用來(lái)編寫功能

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

對(duì)代碼進(jìn)行編譯

tsc

此時(shí)我們的項(xiàng)目就會(huì)多了一個(gè)dist目錄

登錄npm

大家沒有npm賬號(hào)的可以注冊(cè)一個(gè)

這個(gè)是網(wǎng)址

https://www.npmjs.com

然后在編輯器終端里面輸入

npm login

接著就會(huì)出來(lái)用戶名、密碼、郵箱這些依次填一下

創(chuàng)建.npmignore文件

在項(xiàng)目根目錄里創(chuàng)建一個(gè).npmjgnore

這個(gè)其實(shí)和.gitignor差不多，就是你發(fā)npm包的時(shí)候，希望哪些文件或者文件夾不發(fā)到這個(gè)npm上

這里不用寫的node_modules,這是默認(rèn)忽略的

版本號(hào)

在package.json里面版本號(hào)，
每發(fā)布一次都要修改一下

發(fā)布

npm publish

發(fā)布成功

安裝使用

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

目的是 我們要安裝的包不能和package.json里面的包名字是一樣的

然后再安裝一下我們這個(gè)包：

npm install ming-npm-package@1.0.1

跟其他的包一樣 npm install 包名

安裝成功:

再次發(fā)布

如果需要再次發(fā)布一定要改個(gè)版本號(hào)，改成之前的名字

然后再tsc對(duì)代碼進(jìn)行編譯

npm publish 進(jìn)行發(fā)布

源碼

這個(gè)是我的代碼

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前文章：從零使用TypeScript開發(fā)項(xiàng)目打包發(fā)布到npm
網(wǎng)址分享：http://www.muchs.cn/article14/ihepde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、微信公眾號(hào)、面包屑導(dǎo)航、App開發(fā)、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)