npm插件包构建

1. 我的插件是纯工具函数，所以不需要html的渲染，那么vite就不在我的考虑，vite主要还是应用在界面插件的开发上，会比较好一点，

2. rollup 使用了 ES6 修订版 JavaScript 中包含的代码模块的新标准化格式，而不是以前的特定解决方案，如 CommonJS 和 AMD。这意味着可以自由无缝地组合你最喜欢的库中最有用的单个函数。实现局部加载的功能。

3. Tree-Shaking会静态分析您导入的代码，并排除任何未实际使用的内容。

步骤 1: 初始化项目

1. 创建项目目录

2. 初始化项目
初始化一个新的 npm 项目，这将会生成一个 package.json 文件：

3. 安装开发依赖
安装 Rollup 和所需的插件：
• rollup：核心打包工具。
• rollup-plugin-typescript2：处理 TypeScript 文件。
• @rollup/plugin-commonjs：将 CommonJS 转换为 ES6。
• @rollup/plugin-babel：使用 Babel 转译代码。
• @rollup/plugin-node-resolve：解析模块。
• rollup-plugin-node-globals：处理 Node.js 的全局变量。
• rollup-plugin-node-builtins：处理 Node.js 的内置模块。
• @rollup/plugin-terser：压缩代码。
• @rollup/plugin-json：导入 JSON 文件。
• rollup-plugin-dts：生成 TypeScript 声明文件。
• typescript：安装 TypeScript。
• @types/node: types声明文件

4. 配置 TypeScript
添加 tsconfig.json 来配置 TypeScript：

步骤 2: 项目结构

• src/index.ts 是你的主文件，它将包含你的主要代码。

步骤 3: 编写代码

• 告诉 TypeScript，所有匹配 "iem:./modules/*" 模式的导入都是有效的模块。

• 使用空的导出 (export {}) 来表示这些模块不导出任何内容。

• 主要目的是让 TypeScript 理解那些通过自定义加载器或者特殊路径的模块，以确保项目正常编译，特别是在集成非标准模块加载或路径时。

步骤 4: 配置 Rollup

步骤 5: 添加打包脚本

• build：执行打包。

• build:watch：监视文件变化并实时打包。

步骤 6: 打包项目

• dist/esm：包含 ES Module 格式的代码。

• dist/cjs：包含 CommonJS 格式的代码。

• dist/umd/index.js：包含 UMD 格式的代码，可以用于浏览器和 Node.js。

• dist/types：包含 TypeScript 的声明文件（.d.ts 文件）。

步骤 7: 测试生成的 npm 包

1. 创建测试目录

2. 编写测试代码
在 test 目录中创建一个 JavaScript 或 TypeScript 文件来测试该包，例如 hello.test.ts：

3. 添加测试脚本
在package.json文件中添加如下内容

4. 运行测试

添加Vitepess文档插件

使用官网的单独安装指令

1. 在文件中建立如下目录

2. 启动并运行
将以下 npm 脚本注入到 package.json 中：
docs:dev 脚本将启动具有即时热更新的本地开发服务器。使用以下命令运行它：