在现代的前端开发中，为了提高开发效率，我们经常使用各种现成的工具和框架。其中，创建项目模板是其中一个常见的需求。create-my-app 就是一个可以快速创建 React 项目模板的 npm 包。本文将详细介绍如何使用它，并在介绍的过程中将深入学习其构建思想和指导其使用方法。
为什么选择 create-my-app?
在创建项目时，很自然地会考虑选择使用官方提供的脚手架工具，例如 create-react-app。不过，如果你希望通过更灵活、可定制的方式来创建项目，则可以选择使用 create-my-app。它使用了 plop，这是一个非常灵活的代码生成器，可以帮助我们根据自己的需求快速生成所需要的代码文件。并且，create-my-app 还提供了各种自定义选项以及完善的项目配置管理，可以让我们更方便地处理项目复杂性，并且避免了从其他项目中复制粘贴代码。
使用方法
- 首先，你需要在你的命令行中使用 npm 安装 create-my-app：
npm install -g create-my-app
- 成功安装后，在命令行中就可以使用 create-my-app 命令了。例如，创建一个 my-app 的 React 项目，你可以在命令行中输入：
create-my-app my-app
创建项目后，create-my-app 会提示你选择所需要的模板。目前，create-my-app 支持多种前端框架，例如 React、Vue 和 Angular 等。在本例中，选择 React，然后 create-my-app 会继续提示你选择其他选项，例如是否需要路由、是否需要 redux 等等。
根据你的需求选择选项后，create-my-app 就会根据你的选择为你创建一个定制化的项目模板。自动生成的代码文件结构如下：
-- -------------------- ---- ------- --- --------- --- ------------ --- ------------ --- ------ - --- ----------- - --- ---------- - --- ----------- - --- ----------- - --- ------------- - --- ---------- --- --- - --- ------- - --- ------ - --- ----------- - --- --------- - --- -------- - --- -------- - --- ------------------ - --- ------------- --- ---------------
你可以在这个模板基础上进行进一步编写代码，然后就可以开始开发了。
自定义选项
create-my-app 支持各种自定义选项，可以帮助我们定制化自己的项目。例如，我们可以自己编写 plop 模板来自定义生成代码文件的逻辑，也可以在项目创建时自动安装我们需要的依赖。下面，我们来看一个具体的例子。
在上述例子中，我们创建了一个 React 项目。现在，我们想要在项目创建时自动集成 Typescript，以及按照我们的需求自定义一些文件。首先，我们需要安装一些相关的依赖：
npm install --save-dev typescript @types/react @types/react-dom @types/jest
然后，我们需要在项目创建前创建一个 Plop 模板。Plop 的模板是基于 Handlebars.js 的，可以通过预定义的占位符来实现动态内容的替换。我们可以在项目根目录中创建一个 plop-templates 目录，并在该目录中创建一个 template.js 文件：
-- -------------------- ---- -------
-- --------------------------
-------------- - ------ -- -
----------------------------- -
------------ ------- - ---------- ----- -----
-------- -
-
----- --------
----- -------
-------- ----- ------- ------
--------- ------- -- --------
--
-
----- --------
----- ---------
-------- ------- ---- ---- ---------------
--------- ------- -- --------
--
--
-------- -
-
----- ------
----- -------------------------
------------- ----------------------------------------
--
-
----- ------
----- -------------------------
------------- --------------------------------------------
--
-
----- ------
----- --------------------------
------------- ---------------------------------------------
--
-
----- ---------
----- ------------------------
---------- --------- -- -
----- ---- - --------------------
------------------ - -------------- -------
------------------ - -------------- -------
----------------- - -------------- ------
------------------ - ----------
----------------- - -
------ ----------
------------ ----------
---------------- ---------
----------- ---------
--
-------------------- - -
-------------- -----------
-------------- ----------
--------------- ----------
------------------- ----------
---------------------------- ----------
------------------------- ----------
------------------------------ -----------
----------------------------------- ---------
-------------------------------- ----------
------------------------------------- ----------
----------- ---------
--
------------- - --------- --------------
----------- - -------------
------------ - ------
------ -------------------- ----- ---
--
--
--
---
--
这里我们创建了一个针对 React + Typescript 的 Plop 模板，并为其定义了一些选项。
我们还需要创建该模板需要的其他文件。在 plop-templates 目录下创建一个存放 index.tsx 的 react-ts 目录，并在该目录中创建一个 index.tsx.hbs 文件：
-- -------------------- ---- -------
------ ----- ---- --------
----- --- - -- -- -
------ -
-----
----------- -- ---- --- ----- - ---------- ---------
------- ---- ---------- ------- --- ------------------------------
------
--
--
------ ------- ----接着，在 react-ts 目录中创建一个 tsconfig.json.hbs 文件：
-- -------------------- ---- -------
-
------------------ -
--------- ------
------ ------- --------------- ----------
---------- -----
--------------- -----
------------------ -----
------------------------------- -----
--------- -----
----------------------------------- -----
--------- ---------
------------------- -------
-------------------- -----
------------------ -----
--------- -----
------ ------------
---------- ----
-------- -
---- -----------
--
-------- --------- ------------
--
---------- -------
-最后，在 react-ts 目录中创建一个 jest.config.js.hbs 文件：
-- -------------------- ---- -------
-------------- - -
------- ----------
---------------- --------
--------------------------- ------------------ -------------
-------- -
---------- -
--------- --------------------------
--
--
----------------- -
------------ ---------------------
--
--现在，我们可以通过以下命令重新创建一个项目：
create-my-app my-app --template=plop-template-react-ts
这样，通过我们自己创建的 Plop 模板，create-my-app 就会自动为我们创建一个新的项目，并自动安装了我们需要的依赖。另外，创建出的项目也拥有我们自己定制的文件结构。
结语
本文介绍了如何使用 npm 包 create-my-app 创建一个自定义 React 项目模板，并详细介绍了该工具的构建思想和使用方法。通过这些内容的学习，相信你已经掌握了如何通过这个工具来快速生成自定制的项目模板，并在此基础上进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005675981e8991b448e3d43