Angular 常用 serve/build 命令及自定义扩展命令

最新推荐文章于 2024-10-27 00:18:03 发布

原创最新推荐文章于 2024-10-27 00:18:03 发布 · 5.8k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#angular #serve #build #自定义 #package

Angular2+ 知识点专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了Angular CLI的各种命令，如ngserve、ngbuild等，及其参数的使用方法，包括最小化打包、预编译特性、指定后台转发地址、构建目标环境、依赖管理等，帮助开发者更高效地进行项目构建和部署。

前言

在Angular项目中，AngularCLI内置了ng build、ng serve等命令。我们想要执行特定功能的build和serve命令的时候，我们需要每次启动都要在后面跟比较长的参数，非常繁琐。AngularCLI项目本身也是也是一个npm项目。在项目中的package.json中的script对应的命令，我们可以通过npm执行命令来代替冗长的命令。eg：
在这里插入图片描述

我们可以用

npm run start

来代替

ng serve

常用启动和编译命令(更新中)

ng serve

ng serve --prod --aot 最小化打包启动
--prod参数后，angular-cli会把用不到的包都删掉，而–aot参数是让angular-cli启动预编译特性。

    ng serve --proxy-config proxy.conf.json
        指定后台转发地址，即nginx的proxy_pass代理功能。开发时为避免ajax跨域，需要指定后台接口的转发地址。
        proxy.config.json文件示例如下：

{
  "/api": { // 匹配前缀
    "target": "http://localhost:3000", // 转发地址
    "secure": false
  }
}

ng serve --base-href ./
指定站点的起始路径，如果你希望你的站点根路径为 www.abc.com/mypath/ ，需要这样设置：

ng build --base-href /mypath/

ng build

ng build --prod --aot 最小化编译打包
--prod参数后，angular-cli会把用不到的包都删掉，而–aot参数是让angular-cli启动预编译特性。

ng build --target
指定构建的目标，默认值是development，如果指定为production，构建时会加入treeshaking、代码压缩混淆等。下面两条等价：

ng build --target=production
ng build --prod
ng build --environment

指定应用执行环境。CLI会根据指定的值加载对应的环境配置文件。下面两句等价：

ng build --environment=prod
ng build --env=prod

构建时会加载angular-cli.json指定的环境配置文件：

"environments": { 
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

ng build --delete-output-path

ng build --delete-output-path = true（默认）build时清空目标文件夹
ng build --delete-output-path = false build时替换目标文件夹重复命名文件

ng lint

调用tslint运行整个项目，获取警告和错误，来指出代码中不规范的地方

ng lint -force -fix -format 帮助格式修复

拓展：

CLI其实内置了几个快捷命令来对应默认生成的配置如ng serve、ng build等等，如果是我们额外自定义的配置，则可以使用ng run <project>:<architect>[:configurations] [其他配置]命令来实现，其中project和architect为必填，configurations为选填。

比如我们在angular.json/angular-cli.json简单额外自定义一个本地运行的服务器命令：

{
    "architect":{
        "myServe":{
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
                "browserTarget": "xxxx:build",
                "port": 8800
            },
            "configurations": {
                "port1": {
                    "port": 8801
                },
                "port2": {
                    "port": 880
                }
            }
        }
    }

}
配置使用了内置的运行本地服务器程序，然后使用默认的build配置，加上自定义的运行端口，另外加上两个不同模式，运行不同端口。

使用ng run xxxx:myServe可以正常运行本地服务器跑项目，端口是8800
使用ng run xxxx:myServe:port1端口是8801

当然，我们还可以直接使用额外的命令行配置直接覆盖已经定义的配置：
ng run xxxx:myServe:port1 --port=8808

package.json依赖管理dependencies中^和~的区别

    ~的意思是匹配最近的小版本
         比如~4.0.2将会匹配所有的4.0.x版本，但不匹配4.1.0
    ^的意思是最近的一个大版本
         比如^4.0.2 将会匹配所有 4.x.x, 但不包括5.x.x