介绍
在前端开发中，使用工具可以提高我们的生产力和开发效率。其中，使用 yeoman 可以帮助我们快速搭建项目框架，提供简易的脚手架搭建功能。
generator-angular-webpack-async 是一个在 yeoman 上基于 webpack 和 angular1.x 的单页面应用程序脚手架生成器，可以快速搭建具有高度可定制性的项目框架。其优点包括：
- 支持 ES6、Less 预编译以及很多插件功能，提高开发效率
- 自动化框架搭建，省去搭建时间，集中精力完成业务实现
- 支持异步按需加载，提高页面的加载速度
本文将详细介绍 generator-angular-webpack-async，以及如何使用该工具进行项目框架搭建。
准备工作
- 安装 node 和 npm，具体安装方法可以访问 node 官网进行查看
- 全局安装 yeoman：
$ npm install -g yo - 全局安装 generator-angular-webpack-async：
$ npm install -g generator-angular-webpack-async
快速入门
初始化项目
打开命令行窗口，输入以下命令：
$ yo angular-webpack-async myProject
其中，myProject 是项目名，可以自定义。
按照提示输入项目相关参数，完成初始化。
安装依赖
进入项目目录：
cd myProject
执行以下命令安装依赖：
$ npm install
运行项目
执行以下命令启动项目：
$ npm run dev
运行成功后，打开浏览器访问 http://localhost:8080，即可启动项目。
项目结构
generator-angular-webpack-async 生成的项目目录如下：
-- -------------------- ---- ------- ---------- --- -------- --- ------------- --- ---------- --- --------- --- --- - --- ---------------- - --- ------ - --- ------------ - --- ------ - - --- ---------- - - --- -------- - --- ---------- - --- ------ - --- -------- - --- ----- - --- --------- - --- -------- --- ---- - --- ------ - --- ---------- - --- ---------- - --- --------- --- ------------ - --- --- --- ----------------- --- ------------
其中， app 目录下存放了我们的代码， dist 目录下存放webpack 打包后生成的文件， node_modules 目录下存放项目依赖。
模块解析
app.js
该文件为入口文件，其中包含了关键的启动代码。如下：
import 'bootstrap/dist/css/bootstrap.min.css';
import angular from 'angular';
import appModule from './config/app.module';
angular.element(document).ready(function () {
angular.bootstrap(document, [appModule.name]);
});另外，使用 oclazyload 与 angular-ui-router 实现按需加载功能，提高页面的加载速度。
-- -------------------- ---- -------
-- ------
----- ---------- - ---- ------------ ----- -- -
------ --------- -- -
------------------ -- -- -
--- ------ - ------------------------------------
------------------ ----- ----------- ---
----------------
---
--
--
-- ----
--- ------------ - ---------------- ------------------- -- -
--------------
-------------- -
---- ----
------------ ------------------------------------
----------- --------------- -- ------
-------- -
----------- -------------- ------------ ------- -- ---- ---- --
-
--
--
-------------------- - ------------------ ----------------------
-------------------------app.constants.js
该文件存放了应用程序的常量信息，在应用程序运行时将被注入到根作用域。如下：
export default angular.module('app.constants', [])
.constant('VERSION', require('../../package.json').version)
.name;app.specs.js
该文件存放了应用程序测试代码，用于测试框架是否正确地工作。如下：
describe('测试suite', function() {
it('测试case', function() {
expect(1 + 1).toBe(2);
})
});common
该目录用于存放应用程序中的一些通用组件和服务。
components
该目录用于存放应用程序中的组件代码。
config
该目录用于存放应用程序基础配置信息，包括路由配置、核心模块定义等。
services
该目录用于存放应用程序中的服务代码。
theme
该目录用于存放应用程序中主题相关的代码，如样式文件等。
vendor.js
该文件存放了应用程序的第三方库，如 angular、jquery、bootstrap 等。
views.js
该文件存放了应用程序中视图（HTML）文件的 requirejs 配置项。
结语
通过使用 generator-angular-webpack-async，我们可以快速搭建项目框架，简化开发流程，提高开发效率。更多详细内容可以查看官方文档和示例代码：generator-angular-webpack-async。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556e381e8991b448d3c0b