介绍
@janunld/generator-angular 是一个用于快速生成 Angular 项目骨架的 npm 包。该包集成了多种常用的前端工具，如 TypeScript、Sass、Karma 等，可以极大地提高项目搭建的效率。
本篇文章将介绍如何使用 @janunld/generator-angular，在实际项目中快速生成 Angular 项目骨架，以及如何根据自己的需求进行自定义配置。
安装
使用 @janunld/generator-angular，需要先安装 Yeoman，Yeoman 是一个用于生成各种应用程序骨架的工具，包括 Web 应用程序。
npm install -g yo
安装 Yeoman 后，还需要安装 @janunld/generator-angular：
npm install -g @janunld/generator-angular
安装完成后，即可使用 @janunld/generator-angular 了。
使用
1. 创建项目
首先，在命令行中进入你想要创建项目的目录，并运行以下命令：
yo @janunld/angular
之后，你将看到一个交互界面，你需要根据提示输入一些信息，如项目名称、版本号等。
在输入项目相关信息后，@janunld/generator-angular 会自动开始创建项目，这个过程可能需要一点时间。
2. 运行项目
创建完成后，你可以使用以下命令进入项目文件夹，并启动应用程序：
cd your-app-name npm start
这将启动开发服务器，并在默认浏览器中打开你的应用程序。
3. 执行测试
@janunld/generator-angular 提供了 Karma 和 Protractor 两种测试工具。你可以运行以下命令来执行测试：
npm test
这将启动 Karma 运行单元测试。
npm run e2e
这将启动 Protractor 运行端到端测试。
自定义配置
@janunld/generator-angular 提供了一些自定义配置，你可以根据自己的需求来修改这些配置。
修改应用程序端口
默认情况下，@janunld/generator-angular 将应用程序运行在 4200 端口上。如果你想要修改端口号，可以编辑项目文件夹中的 .angular-cli.json 文件，在其中找到以下代码：
{
...
"defaults": {
"serve": {
"port": 4200
}
}
}将 port 属性修改为你想使用的端口号即可。
选择 CSS 预处理器
@janunld/generator-angular 支持 CSS 预处理器 Sass 和 Less。你可以在创建项目时选择使用哪种预处理器，默认情况下使用 Sass。
如果你想使用 Less，可以运行以下命令来创建项目，并选择使用 Less：
yo @janunld/angular --style less
添加自定义组件
创建完成后，你可以使用以下命令创建新的组件：
ng generate component my-component
这将在 src/app 文件夹中创建一个名为 my-component 的组件。
自定义工具链
@janunld/generator-angular 使用了默认的工具链，包括 TypeScript、Karma、Protractor 等。如果你想要使用其他工具或库，可以在创建项目时使用 --skip-install 参数跳过默认安装，然后自行修改 package.json 中的依赖项。
结语
使用 @janunld/generator-angular 可以极大地提高 Angular 项目搭建的效率，同时也为我们提供了许多自定义选项，方便根据项目需求进行配置。希望本篇文章能够帮助你快速了解和使用 @janunld/generator-angular。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b7e81e8991b448d9081