前言
在现如今的前端技术领域中，构建工具和框架是必不可少的一部分。其中，Node.js 的 npm 包是一个优秀的选择。本文将会介绍一个使用 webpack + ES6 + Angular 搭建前端项目的 npm 包——generator-angular-webpack-es6-component 的使用方法。
什么是 generator-angular-webpack-es6-component
generator-angular-webpack-es6-component 是一个使用 Yeoman 生成器构建的 npm 包。它的目标是帮助开发者快速构建使用 webpack + ES6 + Angular 这个现代化的前端技术栈的项目，同时保证项目的可拓展性和可维护性。它的依赖如下：
- Yeoman
- webpack
- ES6
- Angular
安装 generator-angular-webpack-es6-component
首先，确保你已经安装了 Node.js。然后，使用以下命令全局安装 Yeoman 和 generator-angular-webpack-es6-component：
npm install -g yo generator-angular-webpack-es6-component
安装完成后，你就可以使用以下命令创建项目了：
yo angular-webpack-es6-component
生成器的使用
执行上述命令后，会弹出以下选项：
- What is the name of your AngularJS module?：Angular 模块的名称。
- What is the name of your component?：组件的名称。
- Would you like to use Sass?：是否使用 Sass。
- Would you like to include a Bootstrap boilerplate?：是否包含一个 Bootstrap 计划。
- Would you like to include Angular UI-Router?：是否包含 Angular UI-Router。
选择完毕后，会自动为你生成项目的基本结构，如下：
-- -------------------- ---- ------- - --- -------- --- ------------- --- ---------- --- --------- --- --- - --- ------ - --- -------- - --- ------ - - --- ------------- - --- ---------- - --- --------- - --- -------------- - --- ------------ - --- -------------- --- ---------- --- ----------------- --- ---------- --- ------------ --- -----------------
其中，app/ 目录下存放的是你的应用代码。components/ 目录下存放的是你的组件代码。
接着，我们就可以开始开发了！
开发流程
创建一个新组件
执行以下命令，可以快速创建一个新的组件：
yo angular-webpack-es6-component:component yourComponentName
开发组件
在 components/yourComponentName/ 目录下，会生成一个 basic.js 文件，用于编写组件的逻辑代码，和一个 basic.css 文件，用于编写组件的样式代码。你可以使用 ES6 的语法编写你的组件：
-- -------------------- ---- -------
----- ------------- -
----------- -- -
------------ - ------ -------
-
------- -- -
-------------------------- ---------------
-
----- -- -
------------------- -----------
-
-
------ ------- -
----------- --------------
--------- ------------- -- -- ------------- ---------
------- ------------------------------ -------------
--在应用中使用组件
在 app.js 中引入你的组件：
import yourComponent from './components/yourComponent/basic';
angular.module('yourModule', [])
.component('yourComponent', yourComponent);在 app.html 中使用你的组件：
<div ng-app="yourModule"> <your-component></your-component> </div>
教程总结
通过这篇文章，我们学习到了如何安装和使用 generator-angular-webpack-es6-component。我们了解了这个工具的依赖和目标，也学习了在这个工具的帮助下使用 webpack + ES6 + Angular 等技术搭建前端项目的流程。在实际开发中，你可以使用这个工具生成项目基础结构，也可以使用它方便地创建新组件，快速开发前端应用。
示例代码：https://github.com/Alexander-hhh/generator-angular-webpack-es6-component-tutorial
参考文献
[1] Yeoman. Getting Started. https://yeoman.io/learning/
[2] generator-angular-webpack-es6-component. npm. https://www.npmjs.com/package/generator-angular-webpack-es6-component
[3] Alexander-hhh. generator-angular-webpack-es6-component-tutorial. GitHub. https://github.com/Alexander-hhh/generator-angular-webpack-es6-component-tutorial
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d2281e8991b448dad54