angular-cli工程搭建指南

前端工程搭建的三种手段

全程手动，一点点自己搭建，对技术人员要求比较高，必须对框架有深入的理解和丰富的经验，要能hold住工程搭建过程中的各种坑
seed工程，github上通常会有各个前端框架的种子工程，选一个star多的即可，但是也需要开发人员理解各项配置，种子工程issues存在处理不及时的问题
官方cli工程，它隐藏了所有的配置，开发人员不需要关心webpack等打包配置，专注自己的业务即可，但这也同时意味着失去了配置的灵活性，只能跟随官方社区，不过大多数情况下可以满足我们的需求

为什么要用Angular Cli

仅以我们项目使用的工程对比，未必适用于所有种子工程

Angular Cli

Angular CLI是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。

特性：

快速创建component, module，service，class，directive等
自动打包压缩，摇树优化
热部署（代码修改后，自动编译刷新浏览器）
sass，less的预编译自动识别
集成了开发环境，测试环境，生产环境

开发环境搭建

安装nodejs，如果你是全新环境，最好直接装发布的最高版本（写这篇文章时，最新cli要求nodejs>=6.9）
安装 Angular Cli
npm install -g @angular/cli (全局安装)
安装结束后，运行 ng -v查看是否安装成功
安装开发工具，推荐vscode

使用cli创建工程

ng new my-app (my-app是你项目名称)
等待一段时间，cli会帮你创建好工程目录和所需的node_modules(老版本需要自己npm install安装node_modules)
打开工程，目录结构如下：
根目录

借用ng官网介绍

在my-app文件夹根目录下运行ng serve，你的第一个angular应用就启动了
新建文件可以通过ng generate [options]命令，简写 ng g

Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module
其他ng命令就不在一一介绍，笔者更喜欢通过vscode等开发工具来编写工
程（比如ng format格式化代码，这类操作用ide工具可能更方便，每人开发喜好不同）

老司机们肯定要说了，我要配置proxy，我要启动桩服务器，别急，我们可以通过修改package.json文件，增加启动想要的参数，ng serve相关参数参考官网介绍

笔者配置如下：
我希望启动时自动启动浏览器 —open
我希望配置proxy —proxy-config
我希望启动打桩的服务器
我希望在修改代码后浏览器自动刷新（根据官方文档介绍 ng server支持热部署，但是我的工程没有生效，于是增加了 —poll配置）

proxy需要在node_modules同级目录配置一个proxy.conf.json文件

配置完成后，使用npm start命令

插件引入

熟悉前端开发的童鞋，肯定对jquery，bootstrap不陌生，那么在cli工程中如何引入他们呢，这也是接下来要介绍的重点 .angular-cli.json
打开这个文件可以看到很多配置
app 应用相关配置
e2e 端到端测试配置
lint 静态检查配置
test 单元测试
default ng generate命令以及启动端口的配置等等

启动端口配置：

css引入配置，以bootstrap举例

js引入配置，以jquery，bootstrap举例

需要注意的是.angular-cli.json中的js和css的文件引入是以src为相对目录的，并不是.angular-cli.json所在目录

sass和less不需要我们配置，cli工程会自动编译生成可用文件

工程打包

angular打包编译有两种场景，aot和jit，推荐使用aot方式（这也是最新版本cli工程默认编译方式），参考这篇文章angular2 JIT and AOT
ng build 默认是 dev模式编译打包（angular有dev环境和prod环境两种），编译肯定是选择prod环境
ng build 参数官网介绍

配置package.json文件

根据自己工程的大小，配置 —max_old_space_size，不然会提示内存溢出错误
运行命令 npm run build 生成编译文件，然后部署到服务器上即可

测试，静态检查
测试和静态检查就不详细介绍了，cli主要是通过lint和test命令执行的
在 tslint.json中配置检查规则，官网规则

总结

如果你不想配置繁琐的webpack等等，angular cli值得你拥有，抱紧google大腿 O(∩_∩)O