angular / angular/angular-cli

Provide Angular build context to external tool configuration files

Đang mở
#20,253 6 bình luận 6 reaction 0 người được giao Xem trên GitHub
area: @angular-devkit/build-angular devkit/build-angular:browser feature feature: insufficient votes
Ngôn ngữ chính
TypeScript
Star
27k
Fork
11.8k
Merge trung bình
14 giờ 23 phút
Pull request đã merge (30 ngày)
162

Mô tả

# 🚀 Feature request

### Command (mark with an `x`)

- [X] build

### Description

Spin off from PurgeCSS discussion in #20015.

It would be nice for external tool configuration files (like Tailwind) to have some knowledge about the Angular build context in order to conditionalize their configurations. This could allow `ng build --configuration production` to change the config used by other tools and affect their builds as well. This allows other tools in a project to be more intelligent about the intent of a build and do what the user expects.

### Describe the solution you'd like

There are a couple possible implementations of this.

1. Set an environment variable like `NG_BUILD_CONFIGS="foo,bar,baz"`. Then config files could do something like:

```javascript
const enableOptimizations = process.env['NG_BUILD_CONFIGS'].split(',').includes('production');
```

This would decouple the Angular CLI from any specific tools and allow the individual tool configs to define the semantics for each configuration. Similarly, the semantics for each configuration are also defined directly in the tool's config file rather than `angular.json`. That seems weird to me, but arguably it's a benefit so :man_shrugging:. It also means that the config needs some knowledge of Angular, which isn't too bad considering its in the config, not the tool library, but this can still be undesirable.

2. Add an `env` option in `angular.json`. Each configuration in the `angular.json` file could include an `env` map that looks like:

```jsonc
{
"projects": {
"my-project": {
"architect": {
"build": {
"options": {
"env": {
"MY_BUILD_ENV": "development",
},
},
},
"configurations": {
"production": {
"env": {
"MY_BUILD_ENV": "production",
},
},
},
},
},
},
}
```

The Angular CLI would parse and set the relevant environment variables during a build. Then tool configs could look for the project-specific environment variables like so:

```javascript
const enableOptimizations = process.env['MY_BUILD_ENV'] === 'production';
```

This would still give users full control over the semantics of any given environment variable and they can choose its value on a per-configuration basis. The challenges here include merging multiple configuration environment variables which might conflict and that this environment would apply to all tools used by the Angular CLI. Users might also break something by setting a variable they probably shouldn't (such as `PATH` or other system variables) and breaking the CLI.

3. Just have users set the environment variable on the command line:

```shell
MY_BUILD_ENV="production" ng build --configuration production
```

Then use that variable in the tool config just like previously:

```javascript
const enableOptimizations = process.env['MY_BUILD_ENV'] === 'production';
```

This requires no effort on the Angular CLI side and users can do this today. The downside here is that it requires special knowledge of how to build a particular app. A new developer would reasonably expect `ng build --configuration production` to do everything it needs to, and then be surprised something didn't optimize because they didn't set `MY_BUILD_ENV="production"`. Projects could wrap such a command into an `npm run build:prod` which sets the variable, but not everyone will use it. This is also a cross platform issue, as I don't think there is a Unix and Windows compatible way of doing this (see [this question](https://superuser.com/questions/1405650/setting-environment-variables-for-windows-cmd-temporarily-to-run-a-program-in)), so supporting both environment for build is more hassle for the user.

There are likely other possible implementations that have their own trade offs. We'll need to discuss this more and come to a decision on how to move forward here.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu bằng cách xem xét cách `ng build` đọc các tùy chọn và cấu hình build từ `angular.json`, sau đó đọc cuộc thảo luận liên quan về PurgeCSS trong #20015. Issue này cần có quyết định giữa các cách tiếp cận biến môi trường được đề xuất trước khi có thể bắt đầu triển khai; được xem là hoàn tất khi có thiết kế đã được thống nhất, ngữ nghĩa cấu hình được ghi lại và độ bao phủ cho việc hợp nhất cấu hình cũng như hành vi của nền tảng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, tailwindcss, typescript
Lĩnh vực
build-system, cli, tooling
Loại issue
Tính năng
Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Cần làm rõ
Mức phù hợp với người mới
25/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.