在前端开发中，我们经常需要开发一些可复用的库或组件，这时候我们需要搭建一些基础的工程架构。generator-mklib-typescript 会帮助我们快速创建 TypeScript 类库工程的基本结构，以及基础的开发工具配置。
本篇文章主要介绍 npm 包 generator-mklib-typescript 的使用教程，从如何安装使用到工程结构的详细介绍，帮助读者快速搭建一个 TypeScript 类库工程。
安装 generator-mklib-typescript
generator-mklib-typescript 是一个基于 yeoman 的 generator，我们需要先安装 yeoman 后再进行安装。
安装 yeoman
使用 npm 安装 yeoman：
--- ------- -- --
安装 generator-mklib-typescript
使用 npm 安装 generator-mklib-typescript：
--- ------- -- --------------------------
至此，安装完成。
generator-mklib-typescript 的使用方法
创建工程
使用以下命令创建一个 TypeScript 类库工程：
-- ----------------
执行命令后，会依次提示如下信息：
- 输入工程名称
- 输入描述信息
- 选择 TypeScript 的目标版本
- 输入 GitHub 用户名
- 输入用于发布 npm 包的用户名
完成上述步骤后，我们就创建了一个基础的 TypeScript 类库工程，其中包含了工程基础文件以及开发工具的配置文件。此时，我们可以使用以下命令在本地运行该项目：
--- --- ---
构建工程
使用以下命令构建 TypeScript 类库工程：
--- --- -----
执行命令后，会进行 TypeScript 编译和 webpack 打包，生成的文件存放于 lib 目录下。
发布 npm 包
- 首先，需要为自己的 npm 账户创建一个令牌，以便在命令行中发布 npm 包。登陆 npmjs.com，然后进入 Token 页面，点击创建一个新的 token。
- 将生成的 token 添加至本地的 npmrc 文件中：
--- ------- --- ----- ------ ------------
- 使用以下命令发布 npm 包：
--- -------
至此，我们已经成功地创建了一个 TypeScript 类库工程，并且成功地将它发布到 npm 包仓库中。
工程结构
创建的 TypeScript 类库工程结构大致如下：
- --- - -------- - ---- - ------------- - ------------- - ---------- - ---------- - ------------ - --------- - ------------- - -----------------
src: 存放 TypeScript 类库的源代码test: 存放单元测试代码.eslintrc.yml: ESLint 的配置文件.gitignore: Git 的忽略文件.npmignore: npm 发布时需要忽略的文件列表package.json: npm 包的配置文件README.md: 类库的使用文档tsconfig.json: TypeScript 编译配置文件webpack.config.js: webpack 的配置文件
示例代码
以下是一个简单的 TypeScript 类库示例代码：
-- ------------
----- ------- -
------- -------- ----- -------
----------------- ------- -
--------- - -----
-
------- -
------ ------- ---------------
-
-
------ ------- ---------- ------------------
------ ------- ---- ---------
------------------- -- -- -
---------- ------- -- -- -
----- ------- - --- -----------------
--------------------------------------- ---------
---
---本文介绍了 npm 包 generator-mklib-typescript 的使用教程，并且给出了一个基础的工程结构示例代码，希望能够帮助读者快速搭建 TypeScript 类库工程。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005596581e8991b448d6e3b