前端工程经常会遇到一系列重复性的工作，例如初始化一个前端项目、安装必要的依赖、打包压缩等等。每次重新开始一个新项目时将这些工作都重复一遍是非常耗费时间的。为解决这种状况，我们使用了一些自动化的工具，其中一个比较好用的是 generator-common-mpa-package。
generator-common-mpa-package 是一个基于 Yeoman 生成器的开源项目，它允许我们快速创建基本的多页面应用。 在这篇文章，我们将详细介绍如何使用 generator-common-mpa-package，并提供一些示例代码以帮助你掌握这个工具。
安装
你可以通过 npm 来安装 generator-common-mpa-package 生成器，只需要在命令行输入以下命令即可：
npm install -g yo generator-common-mpa-package
让我们解释一下刚刚输入的命令：
npm是 Node.js 的软件包管理器。install是使用npm安装一个软件包的命令。-g表示全局安装。yo是 Yeoman 生成器的命令行工具。generator-common-mpa-package是你要安装的生成器。
如何使用 generator-common-mpa-package
在安装 generator-common-mpa-package 生成器之后，我们就可以使用它来创建新的项目了。 这里跟随以下步骤来介绍如何创建一个新的项目。
创建一个新的项目
- 用命令行进入你要创建项目的目录中，然后运行以下命令：
yo common-mpa-package
- 这时，你会看到一个选择器，要求你选择要创建的项目的类型：
? 请选择您要生成的类型: (Use arrow keys)
❯ PC (多页面应用)
PC（单页面应用）在此处，我们选择 PC (多页面应用) 作为我们要创建的项目类型。
之后，你将被提示输入你的项目名称，输入完成之后按照提示继续下一步。
最后，你将被询问是否要安装所有依赖项。输入
Y来安装依赖项，否则将跳过安装依赖项这一步。
你的项目创建完成之后，在你的项目根目录中将会看到以下文件和文件夹：
-- -------------------- ---- -------
-
--- ---------
--- -----
--- ----
--- -----------------
--- ------------
--- ---
--- ------
--- --------
--- --------
--- ----------
--- ----------build用于存放打包构建的脚本。dist用于存放打包完成之后的最终文件。package.json用于描述你的项目。src用于存放你的一些基础代码，包括 js 和 css。index.html和page2.html分别是两个页面，这里直接使用了基本的 Hello World 程序。
到这里，你已经成功地创建了一个基于 generator-common-mpa-package 的项目。 下一步是如何在你的项目中使用它。
使用 generator-common-mpa-package
- 执行以下命令。
npm run dev
- 此命令将启动热重载服务器，你可以在本机的浏览器上通过这个服务器看到你的项目。
- 此时，你可以通过
http://localhost:8080/这个地址访问你的应用程序了。
- 打包
npm run build
- 执行此命令会在你的项目根目录下生成一个
dist文件夹，里面存放了你使用npm run dev后打包完成的页面。
generator-common-mpa-package的主要特点
- 基于最新的前端技术
- 使用Webpack4进行自动化打包构建
- 可以快速生成多页面应用、单页面应用项目。
- 使用 ESlint 规范代码，提高代码质量并且使代码更加易读。
总结
因为 generator-common-mpa-package 第一次使用会需要很多命令行和配置项，所以建议你事先把它正确的使用和理解。一旦你理解了这个工具，你就能够在一些合适的情况下使用它快速地搭建前端项目。同时，你也应该注意到，这是一个开源项目，可以向其中加入自己的代码以改进工具的使用和建设。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fdb81e8991b448dd76f