javascript - Angular: Apenas construindo ES2015 em ng build --prod

Eu quero que a saída da compilação de produção produza apenas builds ES2015 e não builds ES5.

Estou usando Angular 8 com o mecanismo de renderização Ivy ativado.

Também estou anexando meus arquivos angular.json, browserslist, tsconfig.json.

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "front-end-inventory": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/front-end-inventory",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest",
              "src/.htaccess"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.slim.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ],
              "serviceWorker": true,
              "ngswConfigPath": "ngsw-config.json"
            },
            "staging": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": true,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ],
              "serviceWorker": true,
              "ngswConfigPath": "ngsw-config.json"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "front-end-inventory:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "front-end-inventory:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "front-end-inventory:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest",
              "src/.htaccess"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "front-end-inventory:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "front-end-inventory:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "front-end-inventory"
}

lista de navegadores

This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
For additional information regarding the format and rule options, please see:
https://github.com/browserslist/browserslist#queries

You can see what browsers were selected by your queries by running:
  npx browserslist

Chrome > 70

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "noImplicitAny": true,
    "strictNullChecks": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

Resultado da compilação atual

A versão atual cria arquivos, mas o index.html não usa type module, e eu quero que o index.html use apenas script do tipo module

Resultado Atual do Index.html

<script src="runtime.dd2d878cd9ae88476a26.js"></script>
<script src="polyfills.8ce2a1027d74b4930bab.js"></script>
<script src="scripts.b7617d15d290ae695226.js"></script>
<script src="main.c6dce3ad2ed82428de43.js"></script>

Resultado esperado do Index.html

<script src="runtime.dd2d878cd9ae88476a26.js" type="module"></script>
<script src="polyfills.8ce2a1027d74b4930bab.js" type="module"></script>
<script src="scripts.b7617d15d290ae695226.js" type="module"></script>
<script src="main.c6dce3ad2ed82428de43.js" type="module"></script>

Os scripts construídos resultantes também não estão prontos para ES2015.

Observação

Se reverter a configuração do browserlist para a configuração padrão fornecida pelo Angular, produz ambos os resultados, ES5 e ES2015.

Resposta #1

Para configurar uma build para direcionar apenas o ES2015, faça o seguinte:

no seu tsconfig.json:

certifique-se, como você já fez, de que o alvo está definido para es2015:

"target": "es2015"

e configure seu browserlist da seguinte forma:

last 2 Chrome versions
last 2 ChromeAndroid versions
last 2 Safari versions
last 2 iOS versions
last 2 Firefox versions
last 2 FirefoxAndroid versions
last 2 Edge versions

Essas configurações compilam apenas para ES2015, embora eu não esteja vendo o atributo type incluído nas tags de script conforme você observou na página index resultante:

<script src="runtime.HASH.js" type="module"></script>

Alguém, por favor, me corrija se eu estiver errado, mas eu não acho que o atributo type seja necessário, a menos que você tenha a intenção de incorporar scripts adicionais para navegadores legados, o que é justamente o que você estava tentando evitar desde o início e, portanto, não é necessário neste cenário. Veja este link como referência

Por fim, observe que você pode usar o seguinte comando para verificar quais versões de navegador sua configuração browserlist irá atingir:

npx browserslist