Angular アプリケーションのビルドターゲット変更に伴い、ブラウザリストを変更
Change browser list due to change of Angular application build target
es5 と es2015 両方ビルドされる設定
Settings to build both es5 and es2015
.browserslistrc or browserslist
# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers # For additional information regarding the format and rule options, please see: # https://github.com/browserslist/browserslist#queries # # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed > 0.5% last 2 versions Firefox ESR not dead not IE 9-11
browserslist の確認の仕方 / How to check the browsers list
$ npx browserslist chrome 86 chrome 85 edge 86 firefox 82 safari 14 safari 13.1
es2015 のみビルドされる設定
Settings to be built only for es2015
# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers # For additional information regarding the format and rule options, please see: # https://github.com/browserslist/browserslist#queries # # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed Chrome > 84 Edge > 85 Firefox > 81 Safari > 13 not dead not IE 9-11
package.json
package.json に設定する場合
When setting to package.json
package.json sample
{ "name": "browserslist-sample", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve --open", "build": "ng build --prod", "build:local": "ng build --prod --base-href / --deploy-url /", "build:prod": "ng build --prod --deploy-url /", "test:browser": "ng test", "test:": "ng test --watch=false --code-coverage --browsers=ChromeHeadless", "lint": "ng lint", "lint:sass": "./node_modules/sass-lint/bin/sass-lint.js -c sass-lint.yml -v -q", "e2e": "ng e2e", "build:stats": "ng build --prod --stats-json", "build:spec": "tsc --project tsconfig.spec.json", "bundle-stats": "webpack-bundle-analyzer dist/stats-es2015.json" }, "private": true, "dependencies": { "@angular/animations": "^11.0.0", "@angular/cdk": "^11.0.0", "@angular/common": "^11.0.0", "@angular/compiler": "^11.0.0", "@angular/core": "^11.0.0", "@angular/fire": "^6.0.2", "@angular/forms": "^11.0.0", "@angular/material": "^11.0.0", "@angular/platform-browser": "^11.0.0", "@angular/platform-browser-dynamic": "^11.0.0", "@angular/router": "^11.0.0", "animate.css": "^3.7.2", "classlist.js": "1.1.20150312", "core-js": "^3.5.0", "firebase": "^7.14.5", "material-design-icons": "^3.0.1", "rxjs": "~6.5.3", "tslib": "^2.0.0", "web-animations-js": "^2.3.2", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1100.0", "@angular/cli": "^11.0.0", "@angular/compiler-cli": "^11.0.0", "@angular/language-service": "^11.0.0", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", "@types/jquery": "3.3.38", "@types/node": "~14.0.5", "codelyzer": "~5.2.0", "concurrently": "5.2.0", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~5.0.2", "karma": "~5.2.3", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-edge-launcher": "0.4.2", "karma-firefox-launcher": "1.3.0", "karma-ie-launcher": "1.0.0", "karma-jasmine": "~3.3.0", "karma-jasmine-html-reporter": "^1.4.2", "protractor": "~7.0.0", "sass-lint": "^1.13.1", "ts-node": "~8.10.1", "tslint": "~6.1.0", "typescript": "~4.0.5", "webpack-bundle-analyzer": "^3.8.0", "@angular-devkit/architect": "^0.1000.4", "firebase-tools": "^8.4.0", "fuzzy": "^0.1.3", "inquirer": "^7.1.0", "inquirer-autocomplete-prompt": "^1.0.1" }, "browserslist": [ "Chrome > 84", "Edge > 85", "Firefox > 81", "Safari > 13", "not dead", "not IE 9-11" ] }
