在前端开发中，我们经常需要创建项目骨架，如何快速创建并规范化骨架，是一个值得探讨的问题。而 npm 包 skeleton-generator 就提供了一个快速创建项目骨架的解决方案。
本文将介绍 npm 包 skeleton-generator 的使用教程，包括安装、使用、配置等方面，并通过示例代码加深读者对其使用的理解，帮助读者更好地应用该工具。
安装
npm 包 skeleton-generator 可以通过以下命令全局安装：
npm install -g skeleton-generator
安装完成后，我们可以通过执行 skeleton-generator 命令来检查安装是否成功。
使用
创建项目骨架
首先，我们需要创建一个配置文件，告诉 skeleton-generator 我们需要使用哪些模板、以及生成的文件存放路径等等。
在项目根目录创建 .skeletonrc.json 文件，并添加以下内容：
-- -------------------- ---- ------- - ------------ - - ------- ------ ------------- --------------------------------------------- --------- -------- -- - ------- -------- ------------- ----------------------------------------------- --------- -------- - -- --------- ----------- -展开代码
这里定义了两个模板，一个是 Vue，一个是 React，分别从不同的 git 仓库中取得。存放路径为 ./skeletons 目录下。
执行以下命令即可生成对应的项目骨架：
skeleton-generator create vue
管理项目骨架
我们可以通过以下命令查看当前系统支持的所有模板：
skeleton-generator list
之后，我们可以通过以下命令删除一个已有的模板：
skeleton-generator delete vue
更新项目骨架
更新项目骨架很简单，只需要重新拉取远程仓库即可。
使用以下命令更新 vue 模板：
skeleton-generator update vue
发布自己的项目骨架
如果你想将自己的项目骨架发布到 npm 中，并供其他人使用，非常简单，只需要编写一个 npm 包即可。
创建一个项目骨架后，在其根目录下执行以下命令即可初始化一个 npm 包：
npm init之后，修改 package.json 文件，添加以下字段：
{ "bin": "path/to/executable", "files": [ "dist/**/*" ] }
其中，bin 字段配置了执行入口文件的路径，files 字段指定了安装包需要包含的文件列表。
最后，使用以下命令将项目骨架发布到 npm：
npm publish配置项
在 .skeletonrc.json 配置文件中，有很多需要配置的选项，下面是一个完整的配置示例：
-- -------------------- ---- ------- - ------------ - - ------- ------ ------------- --------------------------------------------- --------- --------- ------ --------------- ---------- - ------- - ------- -------- ---------- ---------- -- -------------- - ------- -------- ---------- ---------- - -- ---------- - ---------------- ------ - - -- --------- ------------ ---------- - -------------- - ------- -------- ---------- ---------- -- --------------- - ------- -------- ---------- ---------- - -- ---------- - ------------- ---------- - -展开代码
其中，常用的配置项如下：
templates：定义需要创建的项目骨架，支持多个骨架，每个骨架定义如下：name：骨架名称。repository：git 仓库地址。branch：仓库中的分支。dir：仓库中目标骨架的目录路径。prompts：命令行交互式询问，用于修改骨架生成时的默认配置。filters：根据不同骨架生成不同的文件。
output：定义生成的项目骨架保存路径。prompts：全局的命令行交互式询问，用于修改生成时的默认配置。filters：根据不同骨架生成不同的文件。
示例代码
下面是一个实例，用于生成一个基于 Vue 的项目骨架。
开始之前，请确保已正确安装 skeleton-generator 和 vue-cli：
npm install -g skeleton-generator vue-cli
创建
.skeletonrc.json配置文件：-- -------------------- ---- ------- - ------------ - - ------- ------ ------------- --------------------------------------------- --------- -------- - -- --------- ----------- -
展开代码执行以下命令创建项目骨架：
skeleton-generator create vue
执行以下命令进入项目骨架目录，安装依赖，并运行项目：
cd skeletons/vue npm install npm run dev
浏览器打开 http://localhost:8080/ 即可查看项目运行效果。
总结
通过本文，我们学习了 npm 包 skeleton-generator 的使用方法，以及如何通过配置文件、命令行交互式询问等方式来更好地定制和管理项目骨架。此外，我们还提供了一个针对 Vue 的实例，帮助读者更好地理解 skeleton-generator 的使用方法和实践。希望读者能通过本文，进一步了解和掌握该工具，为自己的开发提供便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a1881e8991b448d7bac
