作为一名开发者，你可能曾经使用过其他开发者创建的工具，无论这些工具是开源的还是私有的。这些工具的创建者选择与世界分享他们的作品，这无疑是非常酷的事情！现在，轮到你来做同样的事情了！无论你是想为开源社区做贡献、提升自己的技能，还是仅仅是好奇JavaScript库是如何被构建和分享的，你都来对地方了。

该课程是为那些准备将自己的作品发布到开源社区的中级开发者设计的。你的勇气令人敬佩，因为这并非易事！我的目标是帮助你以正确的方式完成这一过程，同时避免那些让经验丰富的开发者也可能陷入的常见陷阱。

MP4 | 视频：h264、1920×1080 | 音频：AAC，44.1 KHz
语言：英语 | 大小：1.50 GB | 时长：2 小时 54 分钟

由于JavaScript生态系统中有很多工具，我已经精心挑选了最重要的工具，确保本文既专注又实用。你将学会如何：

  • 使用Node.js构建并发布一个库到npm；
  • 使用Rollup进行打包；
  • 使用TypeScript编写易于维护的代码；
  • 设置关键工具，如Jest（测试）、Prettier（格式化）和ESLint（代码检查）。

这篇文章不会深入讲解JavaScript的基础知识，而是一个关于如何发布开源项目的路线图。它旨在为你的开源之旅提供清晰的指引，并帮助你顺利地将作品交到其他开发者手中。

1. 准备环境

在开始构建你的开源库之前，需要确保你已经准备好了以下工具：

1.1 编辑器

首先，你需要一个代码编辑器。推荐使用VS Code，因为它对JavaScript和TypeScript的支持非常优秀。不过，任何你喜欢的代码编辑器都可以。

1.2 Node.js

Node.js是运行脚本、管理依赖关系和打包你的包的必要工具。确保你安装了最新版本的Node.js（v18.18+）。

1.3 Git

Git是版本控制的必备工具。基本了解如何提交、推送和拉取代码已经足够了。

1.4 npm账号

为了将你的包发布到npm，你需要一个npm账号。如果你还没有，可以在npm官网上注册。

1.5 GitHub账号（可选）

虽然不是必须的，但推荐你创建一个GitHub账号。GitHub不仅可以帮助你管理代码库，还能让你更容易地遵循开源社区的最佳实践。

2. 初始化项目

2.1 创建一个新目录

打开终端，创建一个新目录，并将其初始化为一个Node.js项目：

bash

mkdir my-javascript-library
cd my-javascript-library
npm init -y

这将在你的目录中创建一个package.json文件。

2.2 安装依赖项

在开发过程中，你需要一些工具来帮助你打包、测试和格式化代码。安装以下依赖项：

bash

npm install --save-dev rollup typescript @typescript-eslint/parser eslint prettier jest
  • rollup: 用于打包你的库；
  • typescript 和 @typescript-eslint/parser: 用于TypeScript支持和代码检查；
  • eslint: 用于代码检查；
  • prettier: 用于代码格式化；
  • jest: 用于测试。

2.3 配置TypeScript

为了使用TypeScript，你需要生成一个tsconfig.json文件：

bash

npx tsc --init

这将创建一个基本的TypeScript配置文件。你可以根据需要进行调整。

3. 构建你的库

3.1 创建源文件

在src目录中创建一个index.ts文件，这是你的库的入口文件。以下是一个简单的示例：

typescript

export function greeting(name: string): string {
return `Hello, ${name}!`;
}

3.2 打包你的库

使用Rollup来打包你的库。创建一个rollup.config.js文件，并添加以下内容：

javascript

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
input: ‘src/index.ts’,
output: {
dir: ‘dist’,
format: ‘esm’
},
plugins: [nodeResolve()]
};

这将配置Rollup将你的TypeScript文件打包为ES模块。

3.3 配置npm脚本

在package.json中添加以下脚本：

json

"scripts": {
"build": "rollup -c",
"watch": "rollup -w -c",
"test": "jest"
},
  • build: 使用Rollup打包你的代码；
  • watch: 监听文件变化并自动打包；
  • test: 运行测试。

4. 编写测试

在__tests__目录中创建一个index.test.ts文件，并添加以下内容：

typescript

import { greeting } from '../src';

describe(‘greeting’, () => {
it(‘should return the correct greeting’, () => {
expect(greeting(‘Alice’)).toBe(‘Hello, Alice!’);
});
});

这将测试你的greeting函数是否按预期工作。

5. 格式化和检查代码

为了确保代码质量，配置Prettier和ESLint。

5.1 配置Prettier

创建一个.prettierrc文件，并添加以下内容：

json

{
"printWidth": 80,
"tabWidth": 4,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"arrowParens": "always",
"proseWrap": "preserve"
}

5.2 配置ESLint

创建一个.eslintrc.json文件，并添加以下内容：

json

{
"extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {
"no-console": "off",
"no-debugger": "off"
}
}

6. 发布到npm

6.1 打包你的库

在终端中运行：

bash

npm run build

这将在dist目录中生成打包后的文件。

6.2 发布到npm

运行以下命令：

bash

npm publish

根据提示输入你的npm账号信息，然后确认发布。

7. 创建GitHub仓库

虽然不是必须的，但创建一个GitHub仓库可以帮助你更好地管理代码并吸引贡献者。

7.1 初始化Git仓库

在你的项目目录中运行：

bash

git init
git add .
git commit -m "Initial commit"

7.2 创建GitHub仓库

在GitHub上创建一个新的仓库，然后将你的代码推送到远程仓库：

bash

git remote add origin <your-repository-url>
git push -u origin master

8. 遵循社区标准

8.1 添加README.md

在你的项目根目录中创建一个README.md文件，详细描述你的库的功能、安装方法、使用示例以及其他相关信息。

8.2 添加LICENSE文件

为你的项目选择一个开源许可证，并在根目录中添加一个LICENSE文件。

8.3 遵循贡献最佳实践

添加一个CONTRIBUTING.md文件，说明如何为你的项目做贡献，包括代码风格、提交消息格式等。

8.4 设置代码守护

使用工具如Codecov或Coveralls来监控代码覆盖率。

9. 管理依赖关系

9.1 评估第三方依赖

在添加任何第三方依赖时，请仔细评估其安全性和维护情况。你可以使用工具如npm audit来检查依赖项中的漏洞。

9.2 使用语义化版本控制

在package.json中使用语义化版本控制，以确保依赖项的兼容性。

10. 提供良好的开发者体验

10.1 保持API的简单性

确保你的库的API简单直观，易于使用。

10.2 提供示例和文档

在README.md中添加示例代码，并提供清晰的文档，说明如何使用你的库。

10.3 支持 TypeScript

如果你使用TypeScript，请确保为你的库生成并发布类型定义文件（.d.ts）。

11. 规划路线图

11.1 定义长期愿景

在README.md中添加一个路线图部分，说明你对库的长期愿景和计划。

11.2 处理库的生命周期

明确你的库的生命周期，包括何时计划终止支持（如果有这一计划）。

12. 平衡工程化

12.1 避免过度工程化

不要在不必要的地方添加过多的功能或复杂性。

12.2 避免不足工程

确保你的库满足用户的基本需求，并且代码质量高。

12.3 找到”刚刚好”

在功能和复杂性之间找到平衡，确保你的库对目标用户来说是”刚刚好”。

13. 总结

构建并发布一个开源JavaScript库是一项既有挑战又充满收获的任务。你需要学习如何设计、实现和维护一个易于维护的库，并遵循社区的最佳实践。你还需要管理依赖项，确保代码质量，并为用户提供良好的体验。通过本文中提供的步骤，你可以从头开始构建并发布一个开源JavaScript库。

现在，去创造一些令人惊叹的事情吧！世界正在等待你的杰作。

这个课程能够帮助你顺利地构建并发布你的第一个开源JavaScript库。如果你有任何问题或需要进一步的帮助，请随时在评论中提问。

概述
第 1 部分：入门

第 1 讲 欢迎

第 2 讲先决条件

第 3 讲 课程结构

第 2 部分：发布你的第一个包

第四讲 验证你的想法

讲座 5 准备代码库

讲座 6 测试代码库（第 1 部分）

讲座 7 测试代码库（第 2 部分）

第 8 讲 发布代码库

第 3 部分：加强代码质量

课程 9 格式化你的代码

讲座 10 Lint 你的代码

第 11 讲 测试你的代码

第 12 讲 打包你的代码

讲座 13 设置 Git 钩子（上）

讲座 14 设置 Git 钩子（第 2 部分）

第 4 节：从 JS 到 TS

第 15 讲 TypeScript 简介

第 16 讲 重构代码库

第 17 讲 测试重构

第18讲 调整工具以支持TS（上）

第十九讲 调整工具以支持TS（下）

第 20 讲 包含声明文件

讲座21 发布TS代码

第五节：依赖管理

第 22 讲 依赖管理

讲座 23 使用依赖项

讲座 24 更新代码库以支持 CLI

第 25 讲 发布最新更新

第 26 讲 复习资料包

第 6 部分：附加内容

第 27 讲 添加其他模块格式

讲座 28 在浏览器中测试包

讲座 29 Bun 和 Deno 中的测试包

第 30 讲 总结

第 7 部分：下一步

第 31 讲 准备迎接新篇章

讲座 32 那么人工智能呢？

下载说明：用户需登录后获取相关资源
1、登录后，打赏30元成为VIP会员，全站资源免费获取！
2、资源默认为百度网盘链接，请用浏览器打开输入提取码不要有多余空格，如无法获取 请联系微信 yunqiaonet 补发。
3、分卷压缩包资源 需全部下载后解压第一个压缩包即可，下载过程不要强制中断 建议用winrar解压或360解压缩软件解压！
4、云桥网络平台所发布资源仅供用户自学自用，用户需以学习为目的，按需下载，严禁批量采集搬运共享资源等行为，望知悉！！！
5、云桥网络-CG数字艺术学习与资源分享平台，感谢您的赞赏与支持！平台所收取打赏费用仅作为平台服务器租赁及人员维护资金 费用不为素材本身费用，望理解知悉！