摘要：實(shí)際開(kāi)發(fā)中，如果每個(gè)包都去走一遍這些步驟，步驟好像確實(shí)有點(diǎn)多。
歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~
本文由小明plus發(fā)表
很多時(shí)候，我們可能想要用 typescript 語(yǔ)言來(lái)創(chuàng)建一些模塊，并提交到 npm 供別人使用，
那么在 2018 年，如果我想要初始化這樣的一個(gè)模塊，我需要做哪些步驟呢？：
答案是：創(chuàng)建一個(gè)優(yōu)雅的，對(duì)開(kāi)發(fā)者友好的模塊，至少需要以下 15 個(gè)步驟
初始化文件夾，初始化 git 倉(cāng)庫(kù)，初始化 npm，初始化 tsc
修改 tsconfig.js 配置
添加 npm 腳本
添加 tslint 校驗(yàn)代碼規(guī)則以及 editorconfig,prettier 統(tǒng)一代碼風(fēng)格
設(shè)置 git 提交的校驗(yàn)鉤子
開(kāi)始編寫(xiě)代碼
watch 模式開(kāi)發(fā)
忽略 ts 編譯生成的文件夾
添加單元測(cè)試
寫(xiě)一個(gè)單元測(cè)試示例
設(shè)置一些有用的 npm 腳本
完善 package.json 的描述信息
提交代碼到 git 倉(cāng)庫(kù)
發(fā)布包到 npm
本篇文章里，我會(huì)列出每個(gè)步驟的詳細(xì)說(shuō)明。
實(shí)際開(kāi)發(fā)中，如果每個(gè)包都去走一遍這些步驟，步驟好像確實(shí)有點(diǎn)多。所以如果你需要實(shí)際創(chuàng)建項(xiàng)目的時(shí)候，你可以選擇 clone 我提供的樣板項(xiàng)目 來(lái)開(kāi)始一個(gè)新的 ts 模塊的開(kāi)發(fā)，主要步驟如下：
git clone https://github.com/xiaomingplus/npm-typescript-boilerplate.git your-project-name
cd your-project-name
# 安裝依賴(lài)
npm i
# 開(kāi)始開(kāi)發(fā)
npm start
# 修改 package.json 里面的項(xiàng)目名和簡(jiǎn)介
# 修改 README.md 文件內(nèi)容
# 修改 遠(yuǎn)程倉(cāng)庫(kù)的地址
git remote set-url origin your-git-url
下面就是常規(guī)步驟了，學(xué)習(xí)目的的話(huà)，建議按照下面的步驟全部跑一遍：
1. 初始化文件夾，初始化 npm，初始化 tsc
mkdir project-name
cd project-name
# 初始化git項(xiàng)目
git init
# 添加gitignore文件
touch .gitignore
# 復(fù)制這個(gè)地址的ignore內(nèi)容到.gitignore
# 添加readme文件
echo "# My Awesome Typescript Project" >> README.md
# 安裝typescript
npm install --save-dev typescript
# 初始化npm包
npm init --y
# 初始化tsconfig
tsc --init
2. 修改 tsconfig.js 配置
修改以下默認(rèn)配置：
{
"compilerOptions": {
"declaration": true,
"outDir": "./lib",
},
"include": ["src"],
"exclude": ["node_modules", "**/__tests__/*"]
}
最終的 tsconfig 配置如下：
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"declaration": true,
"strict": true,
"outDir": "./lib",
"esModuleInterop": true
},
"include": ["src"],
"exclude": ["node_modules", "**/__tests__/*"]
}
3. 添加 npm 腳本
在 package.json 里編輯 scripts 字段:
{
"scripts": {
"start": "tsc -w",
"build": "tsc"
}
}
4. 添加 tslint 校驗(yàn)代碼規(guī)則以及 editorconfig,prettier 統(tǒng)一代碼風(fēng)格
npm install --save-dev prettier tslint tslint-config-prettier
新建tslint.json文件
{
"extends": ["tslint:recommended", "tslint-config-prettier"],
"rules": {
"no-console": false,
"object-literal-sort-keys": false,
"member-access": false,
"ordered-imports": false
},
"linterOptions": {
"exclude": ["**/*.json", "node_modules"]
}
}
新建 .prettierrc 文件
{
"trailingComma": "all",
"tabWidth": 4,
"semi": false,
"singleQuote": true,
"endOfLine": "lf",
"printWidth": 120,
"overrides": [
{
"files": ["*.md", "*.json", "*.yml", "*.yaml"],
"options": {
"tabWidth": 2
}
}
]
}
新建 .editorconfig
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8
indent_style = space
indent_size = 4
[{*.json,*.md,*.yml,*.*rc}]
indent_style = space
indent_size = 2
添加一個(gè)便捷的 scripts 腳本：
{
"scripts": {
"format": "prettier --write "src/**/*.ts" "src/**/*.js"",
"lint": "tslint -p tsconfig.json"
}
}
5. 設(shè)置 git 提交的校驗(yàn)鉤子
設(shè)置 git 提交的鉤子校驗(yàn)規(guī)范
npm install --save-dev husky @commitlint/config-conventional @commitlint/cli commitizen cz-conventional-changelog
新建 commitlint.config.js 文件
touch commitlint.config.js
寫(xiě)入：
module.exports = {
extends: ["@commitlint/config-conventional"]
};
新建 .huskyrc 文件
touch .huskyrc
寫(xiě)入:
{
"hooks": {
"pre-commit": "npm run format && npm run lint && npm test",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
新建配置文件：
touch .czrc
寫(xiě)入配置：
{ "path": "cz-conventional-changelog" }
package.json 新增 scripts 配置：
{
"scripts": {
"commit": "git-cz"
}
}
6. 開(kāi)始編寫(xiě)代碼
cd project-name
mkdir src
cd src
touch index.ts
寫(xiě)下你的第一行 ts 代碼：
export const Greeter = (name: string) => `Hello ${name}`;
7. watch 模式下開(kāi)發(fā)
npm start
8. 忽略 ts 編譯生成的文件夾
把/lib文件夾添加到.gitignore
/lib
9. 添加單元測(cè)試
npm install --save-dev jest ts-jest @types/jest
創(chuàng)建 jestconfig.json文件：
{
"transform": {
"^.+.(t|j)sx?$": "ts-jest"
},
"testRegex": "(/__tests__/.*|(.|/)(test|spec)).(jsx?|tsx?)$",
"moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"]
}
修改 package.json 里的 scripts 下的 test :
{
"scripts": {
"test": "jest --config jestconfig.json"
}
}
10. 寫(xiě)一個(gè)單元測(cè)試示例
在 src 文件夾下新建一個(gè) __tests__的文件夾來(lái)存放測(cè)試用例文件，新建一個(gè) Greeter.test.ts文件,寫(xiě)入：
import { Greeter } from "../index";
test("My Greeter", () => {
expect(Greeter("Carl")).toBe("Hello Carl");
});
運(yùn)行測(cè)試用例：
npm test
結(jié)果應(yīng)該是通過(guò)的。
11. 設(shè)置一些有用的 npm 腳本
prepare: 發(fā)布前和用戶(hù)安裝前運(yùn)行
prepublishOnly: 發(fā)布前運(yùn)行
preversion: 新建一個(gè)版本前運(yùn)行
version: 新建一個(gè)版本后運(yùn)行
postversion: 新建版本后運(yùn)行
{
"scripts": {
"prepare": "npm run build",
"prepublishOnly": "npm test && npm run lint",
"preversion": "npm run lint",
"version": "npm run format && git add -A src",
"postversion": "git push && git push --tags"
}
}
12. 完善 package.json 的描述信息
name 完善包名，描述，包入口文件 main 字段，typescript 類(lèi)型文件 types 字段定義
{
"name": "project-name"
"description": "A nice greeter",
"main": "lib/index.js",
"types": "lib/index.d.ts"
}
13. 完善文檔信息
新建 doc 文件夾，在里面可以寫(xiě)一些模塊詳細(xì)的文檔:
mkdir doc
完善 readme.md的信息，格式可以參考 這里
14. 提交代碼到 git 倉(cāng)庫(kù)
發(fā)布之后就把代碼提交到 git 倉(cāng)庫(kù)吧
git add .
git commit -m "feat: init"
# 關(guān)聯(lián)到遠(yuǎn)程倉(cāng)庫(kù)不屬于本教程的內(nèi)容，就不寫(xiě)push了
15. 發(fā)布包到 npm
如果你還沒(méi)注冊(cè) npm 的用戶(hù)的話(huà)，需要先注冊(cè)。
npm adduser
注冊(cè)好之后就可以發(fā)布到 npm 了:
# 自動(dòng)修改package.json文件版本號(hào)+1
npm version patch
npm publish
發(fā)布之后，你可以去 https://www.npmjs.com/ 上找到你的包
參考
Step by step: Building and publishing an NPM Typescript package.
此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布，更多原文請(qǐng)點(diǎn)擊
搜索關(guān)注公眾號(hào)「云加社區(qū)」，第一時(shí)間獲取技術(shù)干貨，關(guān)注后回復(fù)1024 送你一份技術(shù)課程大禮包！
