從零使用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 [email protected]
跟其他的包一樣 npm install 包名
安裝成功:
再次釋出
如果需要再次釋出一定要改個版本號，改成之前的名字
然後再tsc對程式碼進行編譯
npm publish 進行釋出
原始碼
這個是我的程式碼
https://github.com/shifengming/ming-npm-package
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。