diff --git a/.local.dic b/.local.dic index 941849710c..26ce41f3ee 100644 --- a/.local.dic +++ b/.local.dic @@ -12,6 +12,7 @@ asynchrony auto-rollup autocomplete autocompletion +Autoprefixer autoruns autotrack autotracking diff --git a/guides/release/configuring-ember/build-targets.md b/guides/release/configuring-ember/build-targets.md index 130036a0f7..36539b0b89 100644 --- a/guides/release/configuring-ember/build-targets.md +++ b/guides/release/configuring-ember/build-targets.md @@ -6,34 +6,39 @@ Why does this matter? Over-transpiling to very old JavaScript increases bundle s If you need to update the defaults for any reason (i.e. need to target a very legacy browser), you can set the targets for your app and the compiler applies only the minimal transforms and polyfills required for those browsers. -If you open `config/targets.js`, you will find the following code: - -```javascript {data-filename=config/targets.js} -"use strict"; - -const browsers = [ - "last 1 Chrome versions", - "last 1 Firefox versions", - "last 1 Safari versions", -]; - -module.exports = { - browsers, -}; +Your app's targets are in the `browserslist` key of `package.json`: + +```json {data-filename=package.json} +{ + "browserslist": [ + "last 1 Chrome versions", + "last 1 Firefox versions", + "last 1 Safari versions" + ] +} ``` -If you inspect your compiled code after running a build with `npm run build`, you'll see that many modern features (like arrow functions and async/await) preserved when your targets support them. +If you inspect your compiled code after running a build with `npm run build`, you'll see that many modern features (like arrow functions and async/await) are preserved when your targets support them. -This feature is backed by [Browserslist](https://github.com/ai/browserslist) and [Can I Use](https://caniuse.com/). +This feature is backed by [Browserslist](https://github.com/browserslist/browserslist) and [Can I Use](https://caniuse.com/). These websites track usage stats of browsers, so you can use complex queries based on the user base of every browser. If you want to target all browsers with more than a 4% market share in Canada, -you'd have the following options: +you could use: -```javascript {data-filename=config/targets.js} -module.exports = { - browsers: ["> 4% in CA"], -}; +```json {data-filename=package.json} +{ + "browserslist": ["> 4% in CA"] +} ``` +Other tools that read Browserslist, like Autoprefixer, use the same list. +See the [Browserslist documentation](https://github.com/browserslist/browserslist#queries) for more queries, and for other places to put the list, such as a `.browserslistrc` file. + It is very important that you properly configure the targets of your app so you get the smallest and fastest code possible. + +## Apps with `config/targets.js` + +Older apps set their targets in `config/targets.js`. +It still works, and it takes precedence over the `browserslist` key, but the build prints a warning about it. +To move over, copy the `browsers` array into the `browserslist` key of `package.json` and delete `config/targets.js`. diff --git a/guides/release/typescript/application-development/addons.md b/guides/release/typescript/application-development/addons.md index 15fb565dc9..358d942f69 100644 --- a/guides/release/typescript/application-development/addons.md +++ b/guides/release/typescript/application-development/addons.md @@ -55,7 +55,7 @@ Additionally: ## Publishing -When you publish an addon written in TypeScript, the `.ts` files will be consumed and transpiled by Babel as part of building the host application the same way `.js` files are, in order to meet the requirements of the application's `config/targets.js`. This means that no special steps are required for your source code to be consumed by users of your addon. +When you publish an addon written in TypeScript, the `.ts` files will be consumed and transpiled by Babel as part of building the host application the same way `.js` files are, in order to meet the application's [build targets][build-targets]. This means that no special steps are required for your source code to be consumed by users of your addon. ### Publishing Notes for V1 Addons @@ -153,6 +153,7 @@ declare module 'addon/templates/*' { +[build-targets]: ../../../configuring-ember/build-targets/ [global-types]: ../../additional-resources/faq/#toc_global-types-for-your-project [publishing-v1]: ./#toc_publishing-notes-for-v1-addons [tsconfig]: ../configuration/#toc_tsconfigjson diff --git a/guides/release/typescript/application-development/configuration.md b/guides/release/typescript/application-development/configuration.md index 050accd1f0..83e8c0ee07 100644 --- a/guides/release/typescript/application-development/configuration.md +++ b/guides/release/typescript/application-development/configuration.md @@ -33,7 +33,7 @@ In general, you may customize your TypeScript build process as usual using the ` Note that any changes you _do_ make to `"outDir"` and `"noEmit"` won't have any effect on how _Ember_ builds your application. The build pipeline will continue to use its own temp folder. -1. Since your application is built by Babel, and only _type-checked_ by TypeScript, we set the [`"target"`][tsconfig-target] key in [`"@tsconfig/ember/tsconfig.json"`][ember-tsconfig] to the current version of the ECMAScript standard so that type-checking uses the latest and greatest from the JavaScript standard library. The Babel configuration in your app's `config/targets.js` and any included polyfills will determine the final build output. +1. Since your application is built by Babel, and only _type-checked_ by TypeScript, we set the [`"target"`][tsconfig-target] key in [`"@tsconfig/ember/tsconfig.json"`][ember-tsconfig] to the current version of the ECMAScript standard so that type-checking uses the latest and greatest from the JavaScript standard library. Your app's [build targets][build-targets] and any included polyfills will determine the final build output. 1. If you make changes to the paths included in or excluded from the build via your `tsconfig.json` (using the [`"include"`][tsconfig-include], [`"exclude"`][tsconfig-exclude], or [`"files"`][tsconfig-files] keys), you will need to restart the server to take the changes into account: the build pipeline does not currently watch the `tsconfig.json` file. @@ -64,6 +64,8 @@ return require('@embroider/compat').compatBuild(app, Webpack, { +[build-targets]: ../../../configuring-ember/build-targets/ + [devtool]: https://webpack.js.org/configuration/devtool/