b97fc82aa1
## Minor changes
When `NODE_ENV=test` is used we'll now apply the `'auto'` configuration for modules transformation. Which causes Babel to check if the current environment needs to be transformed or not. In practice this means that the following `.babelrc` is not needed anymore:
**OLD**:
```json
{
"env": {
"development": {
"presets": ["next/babel"]
},
"production": {
"presets": ["next/babel"]
},
"test": {
"presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]]
}
}
}
```
**NEW**:
```
{
"presets": ["next/babel"]
}
```
## Patches
`@babel/preset-react` has a `development` option that automatically applies a development-time plugin we manually applied before (`@babel/plugin-transform-react-jsx-source`). It also adds another development-time plugin that is said to make debugging/errors clearer: `@babel/plugin-transform-react-jsx-self` which we didn't apply before. Overall this means we can take advantage of preset-react to provide these plugins.
60 lines
1.9 KiB
JavaScript
60 lines
1.9 KiB
JavaScript
const env = process.env.NODE_ENV
|
|
const isProduction = env === 'production'
|
|
const isDevelopment = env === 'development'
|
|
const isTest = env === 'test'
|
|
|
|
// Resolve styled-jsx plugins
|
|
function styledJsxOptions (opts) {
|
|
if (!opts) {
|
|
return {}
|
|
}
|
|
|
|
if (!Array.isArray(opts.plugins)) {
|
|
return opts
|
|
}
|
|
|
|
opts.plugins = opts.plugins.map(plugin => {
|
|
if (Array.isArray(plugin)) {
|
|
const [name, options] = plugin
|
|
return [
|
|
require.resolve(name),
|
|
options
|
|
]
|
|
}
|
|
|
|
return require.resolve(plugin)
|
|
})
|
|
|
|
return opts
|
|
}
|
|
|
|
module.exports = (context, opts = {}) => ({
|
|
presets: [
|
|
[require('@babel/preset-env').default, {
|
|
// In the test environment `modules` is often needed to be set to true, babel figures that out by itself using the `'auto'` option
|
|
// In production/development this option is set to `false` so that webpack can handle import/export with tree-shaking
|
|
modules: isDevelopment && isProduction ? false : 'auto',
|
|
...opts['preset-env']
|
|
}],
|
|
[require('@babel/preset-react'), {
|
|
// This adds @babel/plugin-transform-react-jsx-source and
|
|
// @babel/plugin-transform-react-jsx-self automatically in development
|
|
development: isDevelopment || isTest,
|
|
...opts['preset-react']
|
|
}]
|
|
],
|
|
plugins: [
|
|
require('babel-plugin-react-require'),
|
|
require('@babel/plugin-syntax-dynamic-import'),
|
|
require('./plugins/react-loadable-plugin'),
|
|
[require('@babel/plugin-proposal-class-properties'), opts['class-properties'] || {}],
|
|
require('@babel/plugin-proposal-object-rest-spread'),
|
|
[require('@babel/plugin-transform-runtime'), {
|
|
helpers: false,
|
|
regenerator: true,
|
|
...opts['transform-runtime']
|
|
}],
|
|
[require('styled-jsx/babel'), styledJsxOptions(opts['styled-jsx'])],
|
|
process.env.NODE_ENV === 'production' && require('babel-plugin-transform-react-remove-prop-types')
|
|
].filter(Boolean)
|
|
})
|