欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~

本文由小明plus发表

很多时候,我们可能想要用 typescript 语言来创建一些模块,并提交到 npm 供别人使用,

那么在 2018 年,如果我想要初始化这样的一个模块,我需要做哪些步骤呢?

答案是:创建一个优雅的,对开发者友好的模块,至少需要以下 15 个步骤

  1. 初始化文件夹,初始化 git 仓库,初始化 npm,初始化 tsc
  2. 修改 tsconfig.js 配置
  3. 添加 npm 脚本
  4. 添加 tslint 校验代码规则以及 editorconfig,prettier 统一代码风格
  5. 设置 git 提交的校验钩子
  6. 开始编写代码
  7. watch 模式开发
  8. 忽略 ts 编译生成的文件夹
  9. 添加单元测试
  10. 写一个单元测试示例
  11. 设置一些有用的 npm 脚本
  12. 完善 package.json 的描述信息
  13. 提交代码到 git 仓库
  14. 发布包到 npm

本篇文章里,我会列出每个步骤的详细说明。

实际开发中,如果每个包都去走一遍这些步骤,步骤好像确实有点多。所以如果你需要实际创建项目的时候,你可以选择 clone 我提供的样板项目 来开始一个新的 ts 模块的开发,主要步骤如下:

git clone https://github.com/xiaomingplus/npm-typescript-boilerplate.git your-project-name
cd your-project-name
# 安装依赖
npm i
# 开始开发
npm start
# 修改 package.json 里面的项目名和简介
# 修改 README.md 文件内容
# 修改 远程仓库的地址
git remote set-url origin your-git-url

下面就是常规步骤了,学习目的的话,建议按照下面的步骤全部跑一遍:

1. 初始化文件夹,初始化 npm,初始化 tsc

mkdir project-name
cd project-name
# 初始化git项目
git init
# 添加gitignore文件
touch .gitignore
# 复制这个地址的ignore内容到.gitignore <https://github.com/github/gitignore/blob/master/Node.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 配置

修改以下默认配置:

{
"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 校验代码规则以及 editorconfig,prettier 统一代码风格

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

添加一个便捷的 scripts 脚本:

{
"scripts": {
"format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\"",
"lint": "tslint -p tsconfig.json"
}
}

5. 设置 git 提交的校验钩子

设置 git 提交的钩子校验规范

npm install --save-dev husky @commitlint/config-conventional @commitlint/cli commitizen cz-conventional-changelog

新建 commitlint.config.js 文件

touch commitlint.config.js

写入:

module.exports = {
extends: ["@commitlint/config-conventional"]
};

新建 .huskyrc 文件

touch .huskyrc

写入:

{
"hooks": {
"pre-commit": "npm run format && npm run lint && npm test",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}

新建配置文件:

touch .czrc

写入配置:

{ "path": "cz-conventional-changelog" }

package.json 新增 scripts 配置:

{
"scripts": {
"commit": "git-cz"
}
}

6. 开始编写代码

cd project-name
mkdir src
cd src
touch index.ts

写下你的第一行 ts 代码:

export const Greeter = (name: string) => `Hello ${name}`;

7. watch 模式下开发

npm start

8. 忽略 ts 编译生成的文件夹

/lib文件夹添加到.gitignore

/lib

9. 添加单元测试

npm install --save-dev jest ts-jest @types/jest

创建 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. 写一个单元测试示例

src 文件夹下新建一个 __tests__的文件夹来存放测试用例文件,新建一个 Greeter.test.ts文件,写入:

import { Greeter } from "../index";
test("My Greeter", () => {
expect(Greeter("Carl")).toBe("Hello Carl");
});

运行测试用例:

npm test

结果应该是通过的。

11. 设置一些有用的 npm 脚本

prepare: 发布前和用户安装前运行

prepublishOnly: 发布前运行

preversion: 新建一个版本前运行

version: 新建一个版本后运行

postversion: 新建版本后运行

{
"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 类型文件 types 字段定义

{
"name": "project-name"
"description": "A nice greeter",
"main": "lib/index.js",
"types": "lib/index.d.ts"
}

13. 完善文档信息

新建 doc 文件夹,在里面可以写一些模块详细的文档:

mkdir doc

完善 readme.md的信息,格式可以参考 这里

14. 提交代码到 git 仓库

发布之后就把代码提交到 git 仓库吧

git add .
git commit -m "feat: init"
# 关联到远程仓库不属于本教程的内容,就不写push了

15. 发布包到 npm

如果你还没注册 npm 的用户的话,需要先注册。

npm adduser

注册好之后就可以发布到 npm 了:

# 自动修改package.json文件版本号+1
npm version patch
npm publish

发布之后,你可以去 https://www.npmjs.com/ 上找到你的包

参考

Step by step: Building and publishing an NPM Typescript package.

此文已由作者授权腾讯云+社区发布,更多原文请点击

搜索关注公众号「云加社区」,第一时间获取技术干货,关注后回复1024 送你一份技术课程大礼包!

在2018年如何优雅的开发一个typescript语言的npm包?的更多相关文章

  1. 从0开始用webpack开发antd,react组件库npm包并发布

    一.初始化一个npm包 1.新建一个文件夹(名称随意,建议和报名一致),输入命令 :npm init -y 会自动生成一个包的说明文件 package.json如下(本文以scroll-antd-ta ...

  2. 怎么样写一个能告诉你npm包名字是否被占用的工具

    事情是这样的: 因为我经常会写一些npm包,但是有时候我写完一个包,npm publish 的时候却被提示说包名字被占用了,要不就改名字,要不就加scope,很无奈.npm 命令行可以通过 npm v ...

  3. 在Visual Studio中开发一个C语言程序

    →新建一个项目→选择"其他语言","Visual C++",并选择"win32控制台应用程序",并给控制台应用程序起名.→点击"下 ...

  4. node.js 开发命令行工具 发布npm包

    新建一个文件夹“nodecmd”: 在nodecmd下新建文件夹bin: 在bin文件夹下新建JavaScript文件hello.js #!/usr/bin/env node console.log( ...

  5. 怎么写一个带 bin 的 npm 包

    只需要2步: 1. 在package.json 定义 一下 : { "name": "my-cli", ..., "bin": { &quo ...

  6. 使用node.js开发一个生成逐帧动画小工具

    在实际工作中我们已经下下来不下于一万个npm包了,像我们熟悉的 vue-cli,react-native-cli 等,只需要输入简单的命令 vue init webpack project,即可快速帮 ...

  7. 快速开发一个npm包(轮子)

    动机 很多人都想写一个自己的轮子,可是开始动手的时候你总会遇到以下问题 一个基本的 js 库应该如何编写 基本的前端项目都要哪些文件 又要怎么打包发布到 npm 上 你的 es6 语法如何才能让别人识 ...

  8. 如何发布一个npm包(基于vue)

    前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步. 前提:会使用 npm,有 vue 基础, ...

  9. 从0到1发布一个npm包

    从0到1发布一个npm包 author: @TiffanysBear 最近在项目业务中有遇到一些问题,一些通用的方法或者封装的模块在PC.WAP甚至是APP中都需要使用,但是对于业务的PC.WAP.A ...

随机推荐

  1. MySQL开发——【数据库、数据表的基本操作】

    启动MySQL服务器端 CMD启动MySQL服务器端 net start(启动)|stop(停止)|restart(重启)服务名称(mysql) 连接MySQL服务器端 CMD连接MySQL服务器端 ...

  2. 二 分析easyswoole源码(启动服务)

    前文连接,阅读的时候最好参照EasySwoole2.1.2的源码 $inst->run();//启动服务 这里实际调用的是Core的start方法ServerManager::getInstan ...

  3. unbuntu 安装 teamviewer

    下载 teamviewer 安装包 使用 dpkg 安装 deb 安装包 使用 sudo apt-get install -f 解决依赖问题

  4. 无线网卡连接网络后共享给本地有线网卡使用(Win10)

    无线网卡连接网络后共享给本地有线网卡使用(Win10) 1. 本文主要目的是介绍地有线网卡共享无线网卡的Wifi信号,该应用场景如下: 当在只有wifi环境下,同时有两台电脑A和B,   A为笔记本: ...

  5. Note | 学术论文写作方法和技巧

    目录 1. 论文发表流程 2. 确定科研方向 3. 思考问题和解决问题 4. 审稿 5. 论文写作 5.1. 标题 5.2. 摘要 5.3.介绍 5.4. 相关工作 5.5. 段落 5.6. 方法 5 ...

  6. segmentController

    xml <view class="segmentedControl">     <!-- 循环遍历 -->     <block wx:for=&qu ...

  7. Go语言正则模块

    基本使用 import "bytes" import "fmt" import "regexp" func main() { //这个测试一 ...

  8. 异常与Final

    Throwable 类是 Java 语言中所有错误或异常的超类(这就是一切皆可抛的东西).它有两个子类:Error和Exception.Error:用于指示合理的应用程序不应该试图捕获的严重问题.这种 ...

  9. socketserver实现FTP

    功能: 1.用户加密认证 2.允许同时多用户登录 3.每个用户有自己的家目录 ,且只能访问自己的家目录 4.对用户进行磁盘配额,每个用户的可用空间不同 5.允许用户在ftp server上随意切换目录 ...

  10. VB.NET 定义多行文本字符的几种方式

    vbCrLf 在 .NET 刚刚推出的时候,VB作为一款被微软用来"衬托"C#的语言,在许多细节设计上远不如C#方便. 比如在C#中写一个多行文本,就有各种方式: string s ...