npm 是一个包管理器，它可以让我们方便地在前端项目中使用第三方库和工具。在前端开发中，我们经常需要使用一些相同的代码结构和目录结构，以便更好地管理我们的项目。为了避免重复的工作，开发人员可以使用生成器，这些生成器可以自动创建项目模板和目录结构，以便我们快速开始编码。
一款叫做 generator-wemp 的 npm 包是一个非常好的生成器，它可以自动创建一个完整的 Webpack、Express、MongoDB 和 Pug（旧名：Jade）应用的骨架。本文将为您详细介绍如何使用 generator-wemp，以及为何它是一个有深度和指导意义的工具。
步骤1：安装 generator-wemp
首先，您需要在您的计算机上全局安装 generator-wemp。在终端窗口中输入以下命令：
--- ------- -- -- --------------
该命令安装 Yo 和 generator-wemp ，使其可用于在您的计算机上创建项目模板。
步骤2：使用 generator-wemp 创建项目
生成基于 wemp 创建的新项目的过程非常简单，只需要执行以下命令：
-- ----
该命令会自动创建一个名为 my-new-project 的新项目，同时也会在该目录下自动安装所有必要的依赖项。
步骤3：运行新项目
接下来，您需要转到您的项目目录，并在命令行中运行以下命令：
--- -----
运行该命令后，您将看到一个消息提示，告诉您您的项目正在运行，并显示服务器和端口。您可以在浏览器中输入 localhost:3000 查看您的应用程序。
步骤4：学习如何使用生成的项目模板
生成器 wemp 可以帮助您快速开始编写项目，然而，对于该模板的理解是您构建应用程序的关键。下面是一些有助于深入了解如何使用 wemp 模板的有用信息：
目录说明
wemp 模板遵循一些最佳实践以及目录结构标准，这些目录结构标准有助于组织您的应用程序代码并使其易于维护。以下是该目录的结构的说明：
-
--- ---
- --- ---
--- ------
- --- --------------
- --- --------
- --- -------------
--- ------
--- ------------
--- ------
- --- ---
- --- ---
- --- --
--- -----
--- ---------
--- ---------
--- ----------bin- 包含一些用于启动您的应用程序的文件。config- 包含不同环境的配置设置。public- 包含静态文件（CSS / JavaScript / 图像）的目录。views- 包含用于渲染应用程序的视图文件（Jade files）的目录。
配置文件
该生成器生成的项目包含几个不同的配置文件，作为不同环境的配置信息。这些默认配置可用于初始化您的开发人员设置。config 目录中包含许多有用的配置信息，如端口号和数据库配置。您可以使用 process.env.PORT 或 process.env.MONGODB_URL 等变量访问它们。
视图文件
wemp 存储模板文件的默认目录是 views ，所有模板文件均使用 .pug 文件格式存储。这些文件包含相应的 API 或路由，以便可以访问它们。在 wemp 模板中，有一个包含几个不同页面的 layout.pug，该页面用于定义应用程序的基本布局，您可以在需要时继承它：
------- ----
---------------
----
---------------------
--------------------- ---------------------------- -----------------
------ -----
---------------------- ----------------------
----
----- -------结论
在本文中，我们介绍了使用 generator-wemp 创建 Webpack、Express、MongoDB 和 Pug（旧名：Jade）应用程序的骨架。我们深入学习了如何使用该骨架，它是如何组织的，并且了解了一些有关该骨架的配置和视图文件的信息。凭借其简单性，易用性和常见功能，wemp 生成器是前端开发人员的强大工具箱之一。操作简便，尤其对于新手来说，是理想选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5651ab1864dac66c09