rollup+typescript开发npm包踩过的坑
2023-10-07 17:09:42
前言
npm 是一个包管理工具，它可以帮助我们管理 JavaScript 代码的依赖关系。我们可以在 npm 上找到各种各样的代码包，这些代码包可以帮助我们快速构建出各种各样的应用程序。
rollup 是一个 JavaScript 模块打包工具，它可以帮助我们将多个 JavaScript 模块打包成一个文件，从而方便我们在浏览器中使用。
typescript 是一种强类型的 JavaScript 语言，它可以帮助我们编写出更健壮、更易维护的代码。
本地开发
首先，我们需要创建一个新的 npm 包。我们可以使用以下命令：
npm init -y
这将创建一个新的 package.json 文件，其中包含了包的名称、版本、等信息。
接下来，我们需要安装 rollup 和 typescript：
npm install --save-dev rollup typescript
安装完成后，我们需要创建一个新的 TypeScript 文件，并将其命名为 index.ts。在这个文件中，我们可以编写我们的代码。
例如，我们可以编写一个简单的函数来计算两个数字的和：
function add(a: number, b: number): number {
return a + b;
}
调试
在本地开发过程中，我们可能会遇到一些问题。我们可以使用以下命令来调试我们的代码：
npm run dev
这将启动一个开发服务器，并打开一个浏览器窗口，以便我们可以看到我们的代码的运行情况。
如果我们遇到问题，我们可以使用浏览器的控制台来查看错误信息。
打包
当我们开发完成后，我们需要将我们的代码打包成一个文件，以便可以在浏览器中使用。我们可以使用以下命令来打包我们的代码：
npm run build
这将生成一个名为 bundle.js 的文件，其中包含了我们的打包后的代码。
发布
当我们打包完成后，我们需要将我们的包发布到 npm 上，以便其他人可以使用。我们可以使用以下命令来发布我们的包：
npm publish
这将把我们的包发布到 npm 上，并生成一个新的版本号。
引入
如果我们想在我们的项目中使用我们的 npm 包，我们可以使用以下命令来安装它：
npm install --save <package-name>
这将把我们的包安装到我们的项目中，并将其添加到我们的 package.json 文件中。
接下来，我们就可以在我们的项目中使用我们的 npm 包了。我们可以使用以下语法来引入我们的 npm 包：
import { add } from '<package-name>';
这将把我们的 npm 包的 add 函数导入到我们的项目中。
支持es6模块化引入
如果我们想支持es6模块化引入，我们需要在我们的 package.json 文件中添加以下代码：
{
"main": "lib/index.js",
"module": "lib/index.es.js"
}
这将告诉 npm，当我们使用 es6 模块化语法引入我们的包时，应该使用 lib/index.es.js 文件。
支持cdn方式引入
如果我们想支持cdn方式引入，我们需要在我们的 package.json 文件中添加以下代码：
{
"browser": "lib/index.umd.js"
}
这将告诉 npm，当我们使用 cdn 方式引入我们的包时，应该使用 lib/index.umd.js 文件。
代码提示
如果我们想在我们的项目中使用我们的 npm 包时获得代码提示，我们需要在我们的项目中安装一个名为 @types/
npm install --save-dev @types/<package-name>
这将为我们的 npm 包生成一个 TypeScript 声明文件，并将其安装到我们的项目中。
声明文件
如果我们想为我们的 npm 包生成一个 TypeScript 声明文件，我们可以使用以下命令：
npm run tsc
这将生成一个名为 index.d.ts 的文件，其中包含了我们的 npm 包的 TypeScript 声明文件。
结语
本文结合具体案例，为各位分享了rollup+typescript开发npm包的干货，从本地开发、调试、打包、发布、引入、使用npm包，到如何让npm包支持es6模块化引入、cdn方式引入，再到如何为npm包引入时实现代码提示，如何生成ts声明文件等内容，都做了详细的介绍。相信本文对想要开发和使用npm包的朋友有所帮助。
