Je souhaite que la sortie de génération de production produise uniquement des générations ES2015 et non des générations ES5.
J'utilise Angular 8 avec le moteur de rendu Ivy activé.
Je joins également mes fichiers angular.json, Browserslist, tsconfig.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"
}
# 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
{
"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"
]
}
}
La version actuelle crée des fichiers mais le index.html n'utilise pas le module de type mais je veux que le index.html utilise uniquement le script du module uniquement
<script src="runtime.dd2d878cd9ae88476a26.js"></script>
<script src="polyfills.8ce2a1027d74b4930bab.js"></script>
<script src="scripts.b7617d15d290ae695226.js"></script>
<script src="main.c6dce3ad2ed82428de43.js"></script>
<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>
Les scripts générés qui en résultent ne sont pas non plus prêts pour ES2015.
Si vous rétablissez la liste des navigateurs à la configuration par défaut fournie par angular produit les résultats ES5 et ES2015.
Pour configurer une génération pour cibler uniquement ES2015, procédez comme suit:
dans votre tsconfig.json
:
assurez-vous, comme vous l'avez déjà fait, que la cible est définie sur es2015:
"target": "es2015"
et définissez votre configuration browserlist
comme suit:
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
Ces paramètres sont compilés pour ES2015 uniquement, bien que je ne vois pas l'attribut type
inclus dans les balises de script comme vous l'avez noté dans la page d'index résultante:
<script src="runtime.HASH.js" type="module"></script>
Quelqu'un, s'il vous plaît, corrigez-moi si je me trompe, mais je ne pense pas que l'attribut type
soit nécessaire, sauf si vous avez l'intention d'incorporer des scripts supplémentaires pour les navigateurs hérités, ce que vous tentiez d'éviter en premier lieu et donc, il n'est pas nécessaire dans ce scénario. Voir ceci lien pour référence
Enfin, notez que vous pouvez utiliser la commande suivante pour vérifier les versions de navigateur que votre configuration browserlist
ciblera:
npx browserslist