TypeScript編寫共享庫併發布到npm

一、初始化項目

1、新增一個文件夾,然後cmd進入到文件夾。

2、運行以下命令:

npm init

根據提示,填寫相關的信息。完成以後會生成package.json,如下所示:

{
  "name": "frontlib",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc"
  },
  "keywords": [
    "typescript"
  ],
  "author": "lweiyue",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^3.6.4"
  }
}

二、配置編譯環境

TypeScript需要編譯成JavaScript,才能在實際的項目中使用。

1、運行以下命令行:

npm i typescript -D

2、新建一個名爲tsconfig.json的文件,內容如下:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": true,
        "outDir": "./dist",
        "strict": true
    }
}

三、開始編碼

1、在根目錄下新建一個名爲lib或src的文件夾,專門存放源碼。

2、在lib或src文件夾裏新建一些TypeScript文件,編寫功能。例如我們新建一個四則運算類,如下所示:

export class Calculator {
    public static Add(num1: number, num2: number): number {
        return num1 + num2;
    }
}

3、新建一個名爲index.ts的文件,把所有的類彙總起來。如:

export { Calculator } from './Calculator';

四、編譯代碼

運行以下命令:

npm run build

完成以後,將會看到dist文件夾下生成了一些文件。

五、發佈到npm

1、排除源碼文件夾,新增一個名爲.npmignore的文件,如源碼文件夾爲lib,則在忽略文件裏增加

/lib

2、登錄npm,併發布。

npm adduser
#根據提示輸入信息

npm publish

如果沒有npm賬戶,需要先到官網註冊:https://www.npmjs.com/

六、使用自己編寫的包

就跟使用其他包一樣,npm install 包名

發佈了79 篇原創文章 · 獲贊 67 · 訪問量 10萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章