用vite 快速创建一个ts开发环境并发布npm lib包

我在日常开发中经常使用ts语言，通常需要用webpack来编译和打包，配置起来比较繁琐，后来使用Angular框架，但是用ng来写一个小小的demo感觉非常臃肿，不值当。所以vite是个不错的选择。

创建Vite Ts 开发环境

使用 Vite 快速创建一个原生 TypeScript 开发的项目非常简单。按照以下步骤进行操作：

1. 确保你已经安装了最新版本的 Node.js（建议使用 LTS 版本）。

2. 打开终端，并进入你想创建项目的目录。

3. 运行以下命令来全局安装 Vite：

npm install -g create-vite

1. 运行以下命令来创建一个新的 Vite 项目：

create-vite my-app --template vanilla-ts

这将创建一个名为 my-app 的文件夹，并使用 vanilla-ts 模板来初始化一个原生 TypeScript 项目。

--template vanilla-ts 是在使用 Vite 创建项目时的一个选项参数。它指定了所使用的项目模板为 "vanilla-ts"。

在 Vite 中，模板用于提供项目的初始结构和配置。不同的模板可以为不同类型的项目提供特定的配置和预设。"vanilla-ts" 模板是一个用于原生 TypeScript 开发的模板，它提供了一个简单的项目结构和默认的配置，适用于纯粹的 TypeScript 开发。

通过选择 "vanilla-ts" 模板，你将得到一个基本的原生 TypeScript 项目结构，其中包含一些默认的配置文件（如 tsconfig.json、vite.config.js 等），以及一个示例的 TypeScript 文件。这样你可以立即开始编写 TypeScript 代码，而无需手动设置和配置 TypeScript。

除了 "vanilla-ts" 模板，Vite 还提供了其他一些模板选项，例如 "vue-ts"（用于 Vue.js 和 TypeScript 开发）和 "react-ts"（用于 React 和 TypeScript 开发），它们分别适用于不同的前端框架和技术栈。

通过选择不同的模板，你可以快速初始化适合特定项目类型的初始结构和配置，从而更高效地开始开发。

1. 进入项目目录：

cd my-app

1. 安装项目的依赖：

npm install

1. 运行以下命令来启动开发服务器：

npm run dev

这将启动 Vite 的开发服务器，并在浏览器中打开项目。

现在，你就可以开始在 src 目录下编写你的原生 TypeScript 代码了。Vite 会自动监听你的代码变化，并实时更新你的应用程序。

你可以根据你的需求修改和扩展项目，例如添加其他依赖、配置构建选项等。

请注意，原生 TypeScript 项目使用 Vite 不需要额外的配置，因为 Vite 默认支持 TypeScript。如果你想更深入地定制项目的配置，可以查阅 Vite 的官方文档或社区资源。

1. build

npm run build

开发完之后运行 npm run build 命令来打包项目。

打包压缩、发给甲方。

关机睡觉、等待验收。

验收完成、支付完成。

源码交付、删除项目。

运行后的截图，点击count会++。项目结构和counter.js

---

AI说文章字数不够？那么我们继续加点料吧！

---

上面讲到了创建了ts的开发环境，下面我们用这个环境来发布一个npm lib包。

什么是 npm lib包

npm是Node Package Manager的缩写，是一个用于安装和管理JavaScript库和工具的包管理器。lib包是一个在npm上发布的JavaScript库，提供了一组功能或工具，以供其他开发人员在他们的项目中使用。

lib包通常包含可重复使用的代码、函数、类、模块或插件，可以用于增强开发人员的效率和项目的功能。这些包可以用来处理各种任务，如数据处理、网络请求、UI设计、测试、日志记录等等。

通过使用npm，开发人员可以轻松地在他们的项目中添加和更新这些lib包。他们可以在项目的根目录下使用npm命令安装所需的包，这些包将被下载并存储在项目的node_modules目录下。然后，开发人员可以在项目中的代码中引入这些包，并使用其中提供的功能。

npm lib包的存在使开发人员能够更快地构建和扩展他们的应用程序，同时也能够利用全球社区共享的丰富资源。通过使用这些包，开发人员可以避免从头开始编写复杂的代码，而是使用已经有人开发和测试过的可靠解决方案。这样可以提高开发效率、减少错误，并促进代码的可维护性和可重用性。

开发lib包

这次我们就开发一个简单的功能，反转字符串😄。代码如下。

/**
 * 反转字符串
 * @param str 字符串
 * @returns 反转后的字符串
 * @example reverseString('hello') => 'olleh'
 */
const reverseString = (str: unknown): string => {
  if (typeof str !== 'string') {
    throw new Error('参数必须是字符串');
  }
  return str.split('').reverse().join('');
};
export default reverseString;

好，功能有了，剩下的就是如何发布到npm上了。

在将lib包发布到npm之前，需要进行一些准备工作。以下是准备工作的一般步骤：

1. 创建一个npm账号：首先，你需要在npm上注册一个账号。访问npm官方网站（www.npmjs.com/），点击"Sign up"按钮，按照指示完成注册过程。

2. 初始化项目：在本地创建一个新的项目文件夹，并使用命令行进入该文件夹。然后，通过运行npm init命令，根据提示填写项目的名称、版本、描述等信息。这将生成一个package.json文件，用于管理你的项目和包的相关信息。

3. 编写代码：使用你选择的编辑器编写你的lib包的代码，确保代码符合你的预期，并提供正确的功能和接口。

4. 添加依赖项：如果你的lib包依赖于其他的npm包，你需要在package.json文件的dependencies或devDependencies字段中添加这些依赖项。

5. 测试代码：编写单元测试，确保你的代码能够正常工作并符合预期。

6. 忽略不必要的文件：创建一个.gitignore文件，将你不希望发布到npm的文件或文件夹添加到其中，例如测试文件、文档等。

7. 发布到npm：通过运行npm publish命令将你的lib包发布到npm。确保你已经登录到npm账号，并且在项目文件夹的根目录下运行该命令。发布成功后，你的lib包将在npm上可供其他开发人员使用。

请注意，发布到npm上的包应该遵循一些最佳实践，如给包添加适当的版本号、提供清晰的文档和示例代码、确保代码质量等。这些都有助于提高你的包的可用性和可维护性，吸引更多的用户和贡献者。

类型声明文件

因为我们发的是ts版本的，我们最好加上类型声明文件。

vite-plugin-dts 是一个 Vite 插件，用于自动生成 TypeScript 类型声明文件（.d.ts）。

在使用 Vite 构建 TypeScript 项目时，通常需要手动编写类型声明文件来描述项目中的模块、组件和函数的类型。这个过程可能会比较繁琐和容易出错。vite-plugin-dts 的目的就是简化这个过程，它会基于项目中的源代码自动生成类型声明文件，减少手动编写的工作量。

vite-plugin-dts 的使用非常简单。首先，在你的项目中安装它：

npm install vite-plugin-dts --save-dev

然后，在 Vite 的配置文件 vite.config.js 中将插件引入：

import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';

export default defineConfig({
  plugins: [
    dts(),
    // 其他插件...
  ],
});

当你启动 Vite 构建项目时，vite-plugin-dts 将会自动扫描你的源代码并生成对应的类型声明文件。这些文件将会保存在 dist 目录下的 types 文件夹中。

vite-plugin-dts 还提供了一些配置选项，可以根据你的需要进行自定义。例如，你可以指定生成类型声明文件的输出路径、忽略某些文件或文件夹、自定义类型声明的文件名等。

npm publish

发布之前我们要修改一下package文件。

重点关注图中的5个地方。因为我这发布的是个私有的测试包，所以我加上了@scqilin，类似作用域的东西，防止和别人的包冲突。但是加上这个之后就表示是私有的包，直接使用npm publish 是发布不成功的，这个时候就需要使用：npm publish --access public 命令。

npm publish --access public 是一个用于发布包到 npm 的命令，并将包设置为公共访问权限的选项。在默认情况下，当你使用 npm publish 命令发布包时，包将会被设置为私有访问权限。这意味着只有你自己或与你共享同一组织的开发人员可以访问和安装这个包。

通过在 npm publish 命令后添加 --access public 选项，你可以将你的包设置为公共访问权限。这将使得任何人都可以在 npm 上搜索、访问和安装你的包，无需进行任何特殊的授权或权限验证。

测试npm包

发布之后，很快啊，我们就能下载这个npm包进行测试了。

我们直接在这个项目中进行测试，自产自销！dog。

当鼠标移动到reverseString上的时候，就会弹出reverseString的类型定义，这就是用ts配合类型定义的好处，无需翻阅文档就可以开发了。

简单测试一下，一切功能正常。

---

源码地址：github.com/scqilin/ts-…

---