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

最後

但願看到文章的同窗都有收穫！

文章要是有不對的地方還望指正！

最後祝你們都愈來愈優秀！

歡迎你們加入，一塊兒學習前端，共同進步！