在2018年如何优雅的开发一个typescript语言的npm包?
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~
本文由小明plus发表
很多时候,我们可能想要用 typescript 语言来创建一些模块,并提交到 npm 供别人使用,
那么在 2018 年,如果我想要初始化这样的一个模块,我需要做哪些步骤呢?:
答案是:创建一个优雅的,对开发者友好的模块,至少需要以下 15 个步骤
- 初始化文件夹,初始化 git 仓库,初始化 npm,初始化 tsc
- 修改 tsconfig.js 配置
- 添加 npm 脚本
- 添加 tslint 校验代码规则以及 editorconfig,prettier 统一代码风格
- 设置 git 提交的校验钩子
- 开始编写代码
- watch 模式开发
- 忽略 ts 编译生成的文件夹
- 添加单元测试
- 写一个单元测试示例
- 设置一些有用的 npm 脚本
- 完善 package.json 的描述信息
- 提交代码到 git 仓库
- 发布包到 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包?的更多相关文章
- 从0开始用webpack开发antd,react组件库npm包并发布
一.初始化一个npm包 1.新建一个文件夹(名称随意,建议和报名一致),输入命令 :npm init -y 会自动生成一个包的说明文件 package.json如下(本文以scroll-antd-ta ...
- 怎么样写一个能告诉你npm包名字是否被占用的工具
事情是这样的: 因为我经常会写一些npm包,但是有时候我写完一个包,npm publish 的时候却被提示说包名字被占用了,要不就改名字,要不就加scope,很无奈.npm 命令行可以通过 npm v ...
- 在Visual Studio中开发一个C语言程序
→新建一个项目→选择"其他语言","Visual C++",并选择"win32控制台应用程序",并给控制台应用程序起名.→点击"下 ...
- node.js 开发命令行工具 发布npm包
新建一个文件夹“nodecmd”: 在nodecmd下新建文件夹bin: 在bin文件夹下新建JavaScript文件hello.js #!/usr/bin/env node console.log( ...
- 怎么写一个带 bin 的 npm 包
只需要2步: 1. 在package.json 定义 一下 : { "name": "my-cli", ..., "bin": { &quo ...
- 使用node.js开发一个生成逐帧动画小工具
在实际工作中我们已经下下来不下于一万个npm包了,像我们熟悉的 vue-cli,react-native-cli 等,只需要输入简单的命令 vue init webpack project,即可快速帮 ...
- 快速开发一个npm包(轮子)
动机 很多人都想写一个自己的轮子,可是开始动手的时候你总会遇到以下问题 一个基本的 js 库应该如何编写 基本的前端项目都要哪些文件 又要怎么打包发布到 npm 上 你的 es6 语法如何才能让别人识 ...
- 如何发布一个npm包(基于vue)
前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步. 前提:会使用 npm,有 vue 基础, ...
- 从0到1发布一个npm包
从0到1发布一个npm包 author: @TiffanysBear 最近在项目业务中有遇到一些问题,一些通用的方法或者封装的模块在PC.WAP甚至是APP中都需要使用,但是对于业务的PC.WAP.A ...
随机推荐
- JVM思考-init和clinit区别
JVM思考-init和clinit区别 目录:JVM总括:目录 clinit和init的区别其实也就是Class对象初始化对象初始化的区别,详情看我上一篇博客: JVM总括四-类加载过程.双亲委派模型 ...
- windows 性能监视器常用计数器
转载地址:https://www.jianshu.com/p/f4406c29542a?utm_campaign=maleskine&utm_content=note&utm_medi ...
- ABP框架系列之四十:(Notification-System-通知系统)
Introduction Notifications are used to inform users on specific events in the system. ASP.NET Boiler ...
- ubuntu 配置jdk报错解决办法
vi /etc/profile ,添加如下代码 export JAVA_HOME=/home/mark/android/jdk1.8 export JRE_HOME=/home/mark/androi ...
- 简单好用的时间选择插件My97datepicker
我们经常会需要验证字符串的格式,比如密码长度范围.电子邮件格式.固定电话号码和手机号码格式等,这个时候我们经常会需要用到正则表达式.但是正则表达式用起来性能会低一点,所以在需要验证的时候能不使用正则表 ...
- day13_雷神_前端01
#前端 html 服务器端返回的就是一个字符串,浏览器根据html规则去渲染这个字符串. html 是超文本标记语言,相当于定义统一的一套规则,大家都遵守它,这样就可以让浏览器根据标记语言的规则去解释 ...
- 【UWP】使用 Rx 改善 AutoSuggestBox
在 UWP 中,有一个控件叫 AutoSuggestBox,它的主要成分是一个 TextBox 和 ComboBox.使用它,我们可以做一些根据用户输入来显示相关建议输入的功能,例如百度首页搜索框那种 ...
- iOS逆向之Reveal
Reveal是一个强大的UI分析工具,使用它可以查看各个界面的视图层级,在解决界面显示问题时非常有用.它最大的特点就是非常直观,查看UI布局的时候非常方便. 我们知道,Reveal官网提供的方法只能监 ...
- nginx并发模型与traffic_server并发模型简单比较
ginx并发模型: nginx 的进程模型采用的是prefork方式,预先分配的worker子进程数量由配置文件指定,默认为1,不超过1024.master主进程创建监听套接口,fork子进程以后,由 ...
- 【算法】二叉查找树(BST)实现字典API
参考资料 <算法(java)> — — Robert Sedgewick, Kevin Wayne <数据结构> ...