如何开始你的开源之路(上) --- Typescript开源库的初始化

前言

作为一个码农,是离不开开源社区的,在开源社区做了那么久的伸手党,终于准备给开源社区做点贡献了,也顺便提升一下自己。记录一下自己从0开始搭建一个开源库的。本系列例子是基于TypeScript开发开源库的保姆级。大佬们轻点喷,我这也算自己的一个学习笔记吧。

--- 原创文章 转载请说明出处 ---

初始化

首先第一步是初始化。在初始化之前我们先给文件夹取一个响亮的名字,因为我接下来会做一个基于iztrohook,所以我决定把我的库取名为iztro-hook。于是乎:

sh 复制代码
mkdir iztro-hook

然后我们进入刚刚创建好的文件夹:

sh 复制代码
cd iztro-hook

接着我们执行下列命令进行的初始化:

sh 复制代码
npm init

执行完命令以后我们会被要求输入一些初始化的内容,见下图

  • package name

    此时会让我们输入包名称,假如你就想让你的包名和你的文件夹名字一样,那这个地方按回车就可以了。但是在此之前我们应该去npm上查一下我们即将使用的包名是否被占用。不过不用担心,包名称随时可以在package.json里面修改。所以我们就直接回车吧。最直接的办法就是:

    sh 复制代码
    npm init -y
  • version

    下面会让我们输入版本号,默认是1.0.0,但是我建议使用0.1.0或者0.0.1,这样我们发布以后会给使用者传达一个信息,这个库还不是很稳定,正在逐步完善中。版本号的使用规范是:主版本号.次版本号.补丁版本号。当你有Break Change或者新增了一个大功能的时候,应该增加主版本号,比如我们创建了一个叫Cat的类。如果新增一个主功能中的方法,则增加次版本号,比如我们给Cat新增了一个叫eat()的方法。最后,如果有人发现eat()方法有bug,我们需要修复这个bug,在修复以后应该新增补丁版本号。以上是正式版本号,当然你也可以发布一些类似于 1.2.3-alpha0.8.4-rc.1之类的非稳定版本。当然,你也可以不用遵守上述规则,想用什么版本号就用什么。

  • description

    给你的库添加一个描述,这个你就随意写吧,为了让大家能够更方便的搜的你的库,你可以花点心思写一下。

  • entry point

    这里是程序的入口,可以暂时使用默认配置

  • test command

    单元测试的命令,这里可以暂时留空

  • git repository

    这里填入你的仓库地址

  • keywords

    你这个库的关键词,和description的作用一样,可以让别人更准确的搜到你的库,它会出现在npm的标签列表里。

  • author

    作者名字,当然就填你自己的名字,或者花名、笔名什么的都可以。

  • license

    版权,这里的分类非常非常的多,默认是ISC,但是如果你只想安安静静写代码,就填MIT吧,版权信息后期也可以修改,所以不用担心。

在填完上述内容以后,会出现一个确认界面,直接回车就行了,之后会在目录下生成一个package.jsonjson文件,如果发现内容不对随时可以在该文件内修改。

版本管理仓库

接下来我们需要配置一个版本管理仓库,这里需要用到git,如果你没有安装的话需要自行将其安装到你的系统里,有很多现成的教程。这里假定你已经安装了git,则执行下列命令初始化一下:

sh 复制代码
git init

执行完上述命令会在你的项目文件夹下生成一个.git目录。如果你已经有一个git仓库了,直接添加就可以了:

sh 复制代码
git remote add origin <你的仓库地址>
git pull origin <你的默认分支>

如果你对git的使用不熟练,还请自行查看文档学习。

初始化项目

  • 添加 .gitignore

    创建一个名为.gitignore的文件,在里面添加一些你不想要提交到代码仓库的内容,每行一个项,你可以添加文件夹,或者正则表达式表示的文件。下面是一些例子

    .gitignore 复制代码
    # Dependency directories
    node_modules
    
    # Logs
    logs
    *.log
    npm-debug.log*
    yarn-debug.log*
    yarn-error.log*
    lerna-debug.log*
    .pnpm-debug.log*
    
    # dotenv environment variable files
    .env*
  • 安装Typescript

    sh 复制代码
    npm install -D typescript

    指定-D标志以后,依赖会被记录在package.jsondevDependency字段里,它只会在我们开发阶段需要用到,而发布以后是不需要它们的。所以需要记录在devDependency字段里。这样在发布以后使用你库的人就不需要安装这些依赖。

  • 配置Typescript

    在根目录下创建一个叫tsConfig.json的文件,拷贝下列内容到文件里:

    json 复制代码
    {
      "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "declaration": true,
        "outDir": "./lib",
        "strict": true
      },
      "include": ["src"],
      "exclude": ["node_modules", "**/__tests__/*"]
    }

    这里解释outDirincludeexclude三个字段,其他字段内容请自行研究学习(主要是我也不专业😝)

    • outDir

      编译输出文件夹(记得把它也添加进你的gitignore文件里面哦)

    • include

      需要参与编译的文件夹文件,如果你的源文件不是写在src文件夹里,请修改这个值为你的源文件夹名称。

    • exclude

      你不希望加入编译的文件夹文件,记得一定要把第三方依赖,单元测试,文档等等不需要发布到包里的文件或文件夹添加到这里面。

  • 配置脚本

    打开你的package.json,找到scripts字段,在该字段中添加build: "tsc"

  • 创建src文件夹

    这个文件夹名字也是可以随便取的,当然要和tsConfig.json里面配置的要一致

    json 复制代码
    "include": ["src"],

    然后我们所有源文件都写在src文件夹下就可以了。


完成以上动作,我们就可以开始我们的开源生涯了,快去写代码吧。感谢你的阅读,希望本文对你有帮助,我们下一篇再见。

相关推荐
MiyueFE18 小时前
🚀🚀五个前端开发者都应该了解的TS技巧
前端·typescript
ttod_qzstudio20 小时前
基于typescript严格模式以实现undo和redo功能为目标的命令模式代码参考
typescript·命令模式
张志鹏PHP全栈20 小时前
TypeScript 第十天,TypeScript面向对象之Class(二)
前端·typescript
慧一居士21 小时前
ESLint 完整功能介绍和完整使用示例演示
前端·javascript·typescript
enzeberg2 天前
TypeScript 工具类型(Utility Types)
typescript
難釋懷2 天前
TypeScript类
前端·typescript
杰哥焯逊2 天前
基于TS封装的高德地图JS APi2.0实用工具(包含插件类型,基础类型)...持续更新
前端·javascript·typescript
工业甲酰苯胺3 天前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
土豆骑士4 天前
简单理解Typescript 装饰器
前端·typescript
ttod_qzstudio4 天前
彻底移除 HTML 元素:element.remove() 的本质与最佳实践
前端·javascript·typescript·html