前言
在前端开发中，我们经常会使用到各种 npm 包，但有些包在使用时会经常遇到版本不兼容、依赖冲突等问题，这时我们就需要寻找相同功能的替代包，或者自己根据需求编写一个新的包。对于后者，我们需要使用到一个名为 clones 的 npm 包，它可以帮助我们快速地生成一个 npm 包的骨架代码，让我们能够更方便地开发自己的包。
clones 的安装
首先，我们需要全局安装 clones，使用以下命令：
npm install -g clones
安装完成后，我们就可以在命令行中使用 clones 命令了。
clones 的基本用法
使用 clones 命令生成一个 npm 包的骨架代码非常简单，只需要在命令行中执行以下命令：
clones <package-name>
其中，<package-name> 是你要创建的 npm 包的名称。
例如，我们要创建一个名为 my-package 的 npm 包，只需要执行以下命令：
clones my-package
执行完命令后，clones 会自动在当前目录下创建一个名为 my-package 的文件夹，并生成一些基本的文件和文件夹，如下图所示：
my-package ├── .editorconfig ├── .gitignore ├── .npmignore ├── index.js ├── package.json └── readme.md
接下来，我们来详细讲解这些文件和文件夹的作用。
.editorconfig
这是一个编辑器配置文件，用于约定所有开发者在编辑器中使用相同的代码风格、缩进等规则，以增加代码的可读性和可维护性。
例如，我们在 .editorconfig 文件中设置以下规则：
-- -------------------- ---- ------- ---- - ---- --- ------------ - ----- ----------- - - ----------- - -- ------- - ----- ------------------------ - ---- -------------------- - ----展开代码
表示所有文件都使用 2 个空格缩进、lf 换行符、utf-8 编码、删除每行末的空格、在文件末尾添加空行等规则。
.gitignore
这是一个 Git 忽略文件，用于告诉 Git 哪些文件不需要纳入版本控制。
例如，我们在 .gitignore 文件中添加以下规则：
# Ignore node_modules directory node_modules/ # Ignore .DS_Store file .DS_Store
表示忽略 node_modules 文件夹和 .DS_Store 文件。
.npmignore
这是一个 npm 忽略文件，与 .gitignore 类似，它告诉 npm 哪些文件在发布 npm 包时不需要纳入包中。
例如，我们在 .npmignore 文件中添加以下规则：
-- -------------------- ---- ------- - ------ ----------- ----- ---- ----- ------ ------ ----- ------ - ------ ------ ----- ---- ------展开代码
表示忽略所有的 markdown、日志、锁定、配置等文件和 src、tests 文件夹。
index.js
这是 npm 包的入口文件，当其他开发者在项目中使用你的包时，他们可以通过 require() 或 import 的方式导入这个入口文件。
你可以在这个入口文件中编写你的包的代码，也可以通过 module.exports 或 export 将需要暴露给其他开发者的变量、函数、对象等导出。
package.json
这是 npm 包的配置文件，用于描述 npm 包的各种元数据信息，如作者、版本、依赖、脚本等等。
当你创建一个新的 npm 包时，clones 会根据你输入的包名、作者、邮件等信息自动生成一个初始的 package.json，你可以根据自己的需求修改这个文件。
readme.md
这是 npm 包的说明文件，用于介绍你的包的功能、用法、示例等等。
当其他开发者在 npm 中搜索到你的包时，他们会首先看到这个文件，因此编写良好的 readme.md 文件非常重要。
你可以在这个文件中写入你的包的介绍、安装、使用方法、示例等等。
clones 的高级用法
除了上面介绍的基本用法外，clones 还提供了一些高级用法，帮助我们更加高效地开发 npm 包。
添加依赖
在创建一个新的 npm 包时，我们通常需要引入一些其他的 npm 包作为我们的依赖，clones 提供了一个 -d 或 --dependency 的选项，用于在创建时自动将指定的 npm 包作为依赖添加到 package.json 中。
例如，我们要创建一个依赖于 lodash 的 npm 包，只需要执行以下命令：
clones my-package -d lodash
执行完命令后，在 package.json 文件中会自动添加以下依赖信息：
"dependencies": { "lodash": "^4.17.21" }
添加语言支持
默认情况下，clones 创建的 npm 包的入口文件是一个普通的 JavaScript 文件，如果我们要支持其他语言，例如 TypeScript，需要手动添加配置文件和安装相关的依赖，比较繁琐。
clones 提供了一个 -l 或 --language 的选项，用于指定所创建的 npm 包的语言类型，clones 会自动添加相应的语言支持。
例如，我们要创建一个支持 TypeScript 的 npm 包，只需要执行以下命令：
clones my-package -l typescript
执行完命令后，会自动在项目根目录下创建一个 tsconfig.json 文件，并添加相关依赖。
添加多目录支持
有些 npm 包需要支持多目录结构，例如 React 组件库，它需要在每个组件目录中添加相应的文件和依赖。
clones 提供了一个 -m 或 --multi-directory 的选项，用于指定所创建的 npm 包的支持多目录结构，clones 会自动创建多个目录，并在每个目录中添加相应的文件和依赖。
例如，我们要创建一个支持多目录结构的 npm 包，只需要执行以下命令：
clones my-package -m
执行完命令后，会自动在项目根目录下创建一个名为 src 的文件夹，表示这个包的源代码目录，同时在此目录下创建一个 index.js 文件，并在 package.json 中将其设置为入口文件。
再次执行以下命令：
clones my-package -m -n sub-dir
表示在 src 目录下创建一个名为 sub-dir 的子目录，并在此目录下添加相应的文件和依赖。
使用自定义模板
clones 创建 npm 包时使用的是默认的模板，如果我们想要使用自己定义的模板，可以使用 -t 或 --template 的选项，用于指定自定义的模板地址或名称。
自定义模板可以是本地的文件夹或 git 仓库，也可以是一个 npm 包名称。
例如，我们可以通过以下命令使用 react-template 这个 npm 包作为自定义模板：
clones my-package -t react-template
或者通过以下命令使用本地文件夹作为自定义模板：
clones my-package -t ./my-template
示例代码
最后，我们来看一个示例代码，演示如何使用 clones 创建一个支持 TypeScript 和多目录结构的 npm 包。
首先，在命令行中执行以下命令，安装 clones：
npm install -g clones
然后，在命令行中执行以下命令，创建一个名为 my-package 的支持 TypeScript 和多目录结构的 npm 包，并添加 lodash 和 react 作为依赖：
clones my-package -l typescript -m -d lodash -d react
执行完命令后，会自动在当前目录下创建一个名为 my-package 的文件夹，并生成以下文件和文件夹：
-- -------------------- ---- ------- ---------- --- ------------- --- ---------- --- ---------- --- ------------ --- --------- --- --- --- ---------- - --- ------ - - --- --------- - - - --- --------------- - - --- ---------- - - --- ----------------- - - --- -------- - --- -------- --- ----- - --- -------- --- --------展开代码
同时，在 package.json 文件中，会自动添加以下依赖信息：
-- -------------------- ---- ------- --------------- - --------- ----------- -------- ---------- ------------ --------- -- ------------------ - --------------- ----------- ------------------- ---------- ------------- -------- -展开代码
接下来，我们来逐一讲解这些文件和文件夹的作用。
.editorconfig、.gitignore、.npmignore
这些文件的作用同上面介绍的基本用法，这里不再赘述。
package.json
这个文件同上面介绍的基本用法，这里需要注意的是，在此文件中声明的依赖及其版本号是被其他开发者使用你的包时需要安装的依赖。
readme.md
这个文件同上面介绍的基本用法，这里需要注意的是，编写良好的 readme.md 文件非常重要，可以增加你的包的曝光度和影响力。
src/components 目录
这个目录用于存放组件文件，以 button 组件为例，包括以下文件：
- button.tsx：组件的代码文件，使用 TypeScript 编写；
- button.module.css：组件的样式文件，使用 CSS Modules 编写，可以避免样式污染；
- index.ts：用于导出组件；
src/hooks 目录
这个目录用于存放 hook 文件，以 index.ts 为例，只需要导出 hook 函数即可。
src/index.ts 文件
这个文件用于将所有的组件、hook 等导出，可以在项目中使用：
import { Button } from 'my-package'; function App() { return <Button>Click me</Button>; }
总结
通过本文的介绍，我们了解了 npm 包 clones 的基本用法和高级用法，知道了如何快速地创建一个 npm 包的骨架代码，并根据自己的需求添加依赖、添加语言支持、添加多目录支持和使用自定义模板等等。希望这篇文章对前端开发者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63852
