feat(babel): merges babelrc with microbunde babel config

[wardpeet]

Enables custom babelrc files to get merged with our babelrc file. By default babel already does this if presets/plugins do not exists. With this PR we merge them together.

For @babel/preset-env I've done a special merge as we want to make sure transform-async-to-generator is excluded and modules is set to false.

This allows people to set @babel/preset-env with babel-polyfill as many applications do. This is less relevant for libraries unless they want to ship a few polyfills magically.

Another change that has been added is we only run the node_modules babel transform when the defines option is set. (I think it should speed up microbundle a bit if people aren't using it)

[ForsakenHarmony]

So wait, if someone puts a babelrc in their project dir it gets overridden with our defaults?

[wardpeet]

Let me try to explain a bit better.
So by default we will add '@babel/plugin-transform-react-jsx', 'babel-plugin-transform-replace-expressions', 'babel-plugin-transform-async-to-promises', '@babel/plugin-proposal-class-properties' plugins even if a custom babelrc file is added. The options of each plugin can be overridden if the same plugin is used inside the custom babelrc file.

microbundle/src/lib/babel-custom.js

Lines 55 to 76 in 555af26

	const defaultPlugins = createConfigItems(
	'plugin',
	[
	{
	name: '@babel/plugin-transform-react-jsx',
	pragma: customOptions.jsx || 'h',
	pragmaFrag: customOptions.jsxFragment || 'Fragment',
	},
	isTruthy(customOptions.defines) && {
	name: 'babel-plugin-transform-replace-expressions',
	replace: customOptions.defines,
	},
	{
	name: 'babel-plugin-transform-async-to-promises',
	inlineHelpers: true,
	externalHelpers: true,
	},
	{
	name: '@babel/plugin-proposal-class-properties',
	loose: true,
	},
	].filter(Boolean),

The same principle goes for @babel/preset-env with the only caveat that we don't allow people to overwrite the modules option and we always exclude transform-async-to-generator.

microbundle/src/lib/babel-custom.js

Lines 91 to 112 in 555af26

	preset = createConfigItem(
	[
	preset.file.resolved,
	merge(
	{
	loose: true,
	targets: customOptions.targets,
	},
	preset.options,
	{
	modules: false,
	exclude: merge(
	['transform-async-to-generator'],
	preset.options.exclude || [],
	),
	},
	),
	],
	{
	type: `preset`,
	},
	);

Does this explains it better?

[ForsakenHarmony]

yeah that explains it, ideal would be if we could have a preset like

#362 (comment)

but I guess we'll want to override at least the modules stuff either way

[wardpeet]

I don't think we need a babel preset. I don't see a big issue with merging what we do now. The only problem that I might see is we always exclude transform-async-to-generator which is something I don't mind dropping.

[ForsakenHarmony]

not sure if that's really a problem either

[ForsakenHarmony]

hmm, broke tests with #347

[wardpeet]

let me fix this :)

[ForsakenHarmony]

it's a bit weird, not sure if I should just update the snapshots

[alexandernanberg]

The issue I can see with merging the config is that it's a bit "magical" and ambiguous. With a custom babel preset it would be very clear what's happening and the end user could still customize the other preset options (exclude etc). There are no cases where you want to be able to completely override the default config?

Anyway great work on this! 😄

[briancodes]

I'm using microbundle and loving the zero config. But.... in order to get Jest working it seems I need to supply a .babelrc with the following:

{
  presets: ['@babel/preset-env']
}

Would the merging of this bablerc (which I only need for tests) cause any adverse effects do you think? I'd rather just use microbundle defaults, but don't see a way around using a config file in this instance

[wardpeet]

@briancodes you mostly want to use babel env to fix this. There are 2 options setting BABEL_ENV=test or NODE_ENV=test.

in babelrc you can create this config:

{
  "env": {
    "test": {
      presets: ['@babel/preset-env', { "node": "current", "modules": false }]
    }
  }
}