在前端开发中，我们经常需要创建一些文件夹来存放相关的代码，比如样式、逻辑、图片等。如果手动创建这些文件夹会很麻烦和浪费时间，那么有没有一种工具可以快速的帮助我们创建这些文件夹呢？答案是可以的，而 npm 包 sp-make-folders 正式为我们带来了这样的便利！
什么是 sp-make-folders？
sp-make-folders 是一个基于 Node.js 开发的 npm 包，用于快速创建一个项目基础的文件夹结构。使用这个包，你可以轻松创建以下所示的文件夹结构：
-- -------------------- ---- ------- -------- --- ---- - --- ------- - --- -------- - --- ------- --- ----- - --- ------- - --- -------- - --- ------- --- ------------- --- ---------- --- ------------ --- ---------
文件夹结构包含了项目的基本代码部分，减少了你在开始新项目的时候必须要手动创建的成本，加速了你的开发时和开发进度。
安装和使用
安装
要使用 sp-make-folders 包，首先我们需要通过 npm 安装这个包。在命令行中，输入以下命令以进行安装：
npm install sp-make-folders --save-dev
使用
在安装完成后，我们就可以使用 sp-make-folders 包了。如下所示，我们可以在命令行中，输入以下命令来创建包含预设目录结构的一个新项目：
npx sp-make-folders
这个命令会在项目的当前目录下创建一个名为 project 的文件夹，并包含了上面所示的文件夹结构。我们可以通过修改 sp-make-folders 的配置参数，根据自身的需求来自定义生成的项目结构。
在项目根目录下，我们可以看到生成的项目文件夹 project 并且包含了如下文件：
- package.json：一个包含了版本信息和项目前缀等信息的 JSON 文件。
- README.md：项目的介绍和说明文档。
除此之外，我们可以看到在 project 文件夹下，包含了如下文件夹：
- app：包含项目的源代码文件，包括样式、逻辑和图片等。
- dist：包含项目编译后的代码。
- node_modules：包含所有的项目依赖项的文件夹。
sp-make-folders 的配置参数
有几个可选的配置参数可以帮助你自定义生成的项目结构。这些参数通过命令行中的特殊开关来设置。下面是一些常用的配置参数：
- --lang=xx：指定使用的编程语言，默认为 JavaScript。
- --css-preprocessor=xx：指定使用的 css 预处理器，默认为 Sass。
- --git：指定是否初始化 Git 仓库，默认为 false。
- --force：强制创建一个新项目，即使当前目录已存在一个项目。
例如，如果我们想要使用 TypeScript 作为项目的编程语言，可以在命令行中输入以下命令：
npx sp-make-folders --lang=ts
总结
sp-make-folders 作为一款 npm 包，可以快速的帮助我们创建一个新项目的基础文件夹结构，节省了手动创建的时间，加速了我们的开发进度。同时，通过配置参数，我们也可以根据自身需求来自定义生成的项目结构。希望这篇文章能够帮助你在前端开发中更加高效的工作。
示例代码
-- -------------------- ---- ------- -- -------------------- --------------- -------- ------------- ------ ----------- ---- - ----------------- -------- ------------ ------------- - -- - ------ --------------- - -- ------------------- ------------------- --------- -- ------------------- -- ---------- --------- ----- ----- ---------- ------ ----- ---------------- --------- --------------- ----- ---------------- ---------------------------- ------- ------ ----------- -- -- ------------ ---- ------------------------- ------- ------- ------ ------- ------------------------------------ ------- ------- -- ------------ - ------- ------------- ---------- -------- ---------- --- ------------------ -- - -- --------- - -- ------- ---- -- -- --------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006707e8ccae46eb111eed8