Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: refine Babel config merging strategies #2531

Merged
merged 6 commits into from May 28, 2021
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
42 changes: 28 additions & 14 deletions docs/configuration.md
Expand Up @@ -115,7 +115,7 @@ Check out the [babel-cli documentation](cli.md) to see more configuration option

```js
require("@babel/core").transformSync("code", {
plugins: ["@babel/plugin-transform-arrow-functions"]
plugins: ["@babel/plugin-transform-arrow-functions"],
});
```

Expand All @@ -124,6 +124,7 @@ Check out the [babel-core documentation](core.md) to see more configuration opti
## Print effective configs

You can tell Babel to print effective configs on a given input path

```sh
# *nix or WSL
BABEL_SHOW_CONFIG_FOR=./src/myComponent.jsx npm start
Expand Down Expand Up @@ -188,6 +189,7 @@ Babel will print effective config sources ordered by ascending priority. Using t
```
babel.config.json < .babelrc < programmatic options from @babel/cli
```

In other words, `babel.config.json` is overwritten by `.babelrc`, and `.babelrc` is overwritten by programmatic options.

For each config source, Babel prints applicable config items (e.g. [`overrides`](options.md#overrides) and [`.env`](options.md#env)) in the order of ascending priority. Generally each config sources has at least one config item -- the root content of configs. If you have configured `overrides` or `env`, Babel will not print them in the root, but will instead output a separate config item titled as `.overrides[index]`, where `index` is the position of the item. This helps determine whether the item is effective on the input and which configs it will override.
JLHwung marked this conversation as resolved.
Show resolved Hide resolved
JLHwung marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -196,19 +198,31 @@ If your input is ignored by `ignore` or `only`, Babel will print that this file

### How Babel merges config items
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This headline is called "How babel merges config items". But config items are "Options" in my world: https://babeljs.io/docs/en/options

Then later there is now a new headline "Options merging"

This makes it confusing to the reader. as the entire chapter is about options merging. Note that presets and plugins are also options, as indicated by the headline here: https://babeljs.io/docs/en/options#plugin-and-preset-options


For each config items mentioned above, Babel applies `Object.assign` on options except for `plugins` and `presets`, which is concatenated by `Array#concat`. For example
For each config items mentioned above, Babel applies `Object.assign` on the option object, which means the option value will be overwritten by another one with higher priority. However, the following options have specialized strategies:

- for `plugins` and `presets`, Babel merge them by `Array#concat`.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- for `plugins` and `presets`, Babel merge them by `Array#concat`.
- for `plugins` and `presets`, Babel merges them via `Array#concat`.

- for `parserOpts`, `generatorOpts` and `assumptions`, Babel merge them by `Object.assign`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- for `parserOpts`, `generatorOpts` and `assumptions`, Babel merge them by `Object.assign`
- for `parserOpts`, `generatorOpts` and `assumptions`, Babel merges them via `Object.assign`


For example

```js
const config = {
plugins: [["plugin-1a", { loose: true }], "plugin-1b"],
presets: ["preset-1a"],
sourceType: "script"
}
sourceType: "script",
assumptions: {
setClassFields: true,
},
};

const newConfigItem = {
plugins: [["plugin-1a", { loose: false }], "plugin-2b"],
presets: ["preset-1a", "preset-2a"],
sourceType: "module"
}
sourceType: "module",
assumptions: {
iterableIsArray: true,
},
};

BabelConfigMerge(config, newConfigItem);
// returns
Expand All @@ -217,13 +231,13 @@ BabelConfigMerge(config, newConfigItem);
["plugin-1a", { loose: true }],
"plugin-1b",
["plugin-1a", { loose: false }],
"plugin-2b"
"plugin-2b",
], // new plugins are pushed
presets: [
"preset-1a",
"preset-1a",
"preset-2b"
], // new presets are pushed
sourceType: "module" // sourceType: "script" is overwritten
})
presets: ["preset-1a", "preset-1a", "preset-2b"], // new presets are pushed
sourceType: "module", // sourceType: "script" is overwritten
assumptions: {
setClassFields: true,
iterableIsArray: true, // assumptions: merged by Object.assign
JLHwung marked this conversation as resolved.
Show resolved Hide resolved
},
});
```