從零使用TypeScript開發(fā)項(xiàng)目打包發(fā)布到npm
前言
typescript作為未來前端開發(fā)的主流框架，在前端開發(fā)的過程中也會越來越主要，相信這篇文章會對你有很大的幫助！
開發(fā)環(huán)境搭建
創(chuàng)建ming-npm-package文件夾
我在桌面上創(chuàng)建了一個(gè)ming-npm-package的文件夾，然后在編輯器里面打開
初始化項(xiàng)目
npm init
通過npm init 初始化項(xiàng)目來創(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
就會生成一個(gè)tsconfig.json文件
修改tsconfig.json默認(rèn)文件
把這兩個(gè)注釋打開
"declaration": true, //打包之后是否生成聲明文件 "outDir": "./dist", //輸出文件
添加exclude,忽略dist文件
在打包的時(shí)候會排除這里面指定的路徑文件
"exclude": [ "./dist" ]
安裝依賴
npm install typescript -D
開始編碼
創(chuàng)建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
對代碼進(jìn)行編譯
tsc
此時(shí)我們的項(xiàng)目就會多了一個(gè)dist目錄
登錄npm
大家沒有npm賬號的可以注冊一個(gè)
這個(gè)是網(wǎng)址
https://www.npmjs.com
然后在編輯器終端里面輸入
npm login
接著就會出來用戶名、密碼、郵箱這些依次填一下
創(chuàng)建.npmignore文件
在項(xiàng)目根目錄里創(chuàng)建一個(gè).npmjgnore
這個(gè)其實(shí)和.gitignor差不多，就是你發(fā)npm包的時(shí)候，希望哪些文件或者文件夾不發(fā)到這個(gè)npm上
這里不用寫的node_modules,這是默認(rèn)忽略的
版本號
在package.json里面版本號，
每發(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è)版本號，改成之前的名字
然后再tsc對代碼進(jìn)行編譯
npm publish 進(jìn)行發(fā)布
源碼
這個(gè)是我的代碼
https://github.com/shifengming/ming-npm-package
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
window.location和document.location的區(qū)別分析
用戶不能改變document.location(因?yàn)檫@是當(dāng)前顯示文檔的位置)。但是,可以改變window.location (用其它文檔取代當(dāng)前文檔)window.location本身也是一個(gè)對象,而document.location不是對象2008-12-12
本篇文章主要介紹了微信小程序-橫向滑動scroll-view隱藏滾動條的相關(guān)知識。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
JavaScript如何將base64圖片轉(zhuǎn)化為URL格式
這篇文章主要給大家介紹了關(guān)于JavaScript如何將base64圖片轉(zhuǎn)化為URL格式的相關(guān)資料,Base64是一種編碼方式,而不是真正的加密方式,即使算Base64也僅用作一個(gè)簡單的加密來保護(hù)某些數(shù)據(jù),而真正的加密通常都比較繁瑣,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)水平和豎直滑動條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了JS動態(tài)添加iframe的代碼,需要的朋友可以參考下2015-09-09
javascript或asp實(shí)現(xiàn)的判斷身份證號碼是否正確兩種驗(yàn)證方法
在網(wǎng)頁中經(jīng)常需要輸入正確的身份證號碼，只能通過程序來驗(yàn)證身份證格式。根據(jù)身份證號碼生成的原理，就是驗(yàn)證后面幾位就可以了。2009-11-11
這篇文章主要給大家介紹了關(guān)于js中apply和call的理解與使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了對JavaScript中this指針的新理解分享,本文講解了方法調(diào)用模式、函數(shù)調(diào)用模式、構(gòu)造函數(shù)調(diào)用模式、Apply調(diào)用模式中的this指針理解,需要的朋友可以參考下2015-01-01
詳細(xì)總結(jié)Javascript中的焦點(diǎn)管理
相信大家都知道焦點(diǎn)作為javascript中的一個(gè)重要功能，基本上和頁面交互都離不開焦點(diǎn)。但卻少有人對焦點(diǎn)管理系統(tǒng)地做總結(jié)歸納。本文就javascript中的焦點(diǎn)管理作詳細(xì)介紹，有需要的朋友們可以參考借鑒。2016-09-09
每天一篇javascript學(xué)習(xí)小結(jié)（Function對象）
這篇文章主要介紹了javascript中的Function對象知識點(diǎn)，對Function對象的基本使用方法，以及各種方法進(jìn)行整理，感興趣的小伙伴們可以參考一下2015-11-11