mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Use preset-react's development option + enable modules transform in test env (#5081)
## 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.
This commit is contained in:
parent
56ad5121a1
commit
b97fc82aa1
|
@ -1,3 +1,8 @@
|
||||||
|
const env = process.env.NODE_ENV
|
||||||
|
const isProduction = env === 'production'
|
||||||
|
const isDevelopment = env === 'development'
|
||||||
|
const isTest = env === 'test'
|
||||||
|
|
||||||
// Resolve styled-jsx plugins
|
// Resolve styled-jsx plugins
|
||||||
function styledJsxOptions (opts) {
|
function styledJsxOptions (opts) {
|
||||||
if (!opts) {
|
if (!opts) {
|
||||||
|
@ -25,11 +30,18 @@ function styledJsxOptions (opts) {
|
||||||
|
|
||||||
module.exports = (context, opts = {}) => ({
|
module.exports = (context, opts = {}) => ({
|
||||||
presets: [
|
presets: [
|
||||||
[require('@babel/preset-env'), {
|
[require('@babel/preset-env').default, {
|
||||||
modules: false,
|
// 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']
|
...opts['preset-env']
|
||||||
}],
|
}],
|
||||||
require('@babel/preset-react')
|
[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: [
|
plugins: [
|
||||||
require('babel-plugin-react-require'),
|
require('babel-plugin-react-require'),
|
||||||
|
|
|
@ -2,7 +2,6 @@ import babelLoader from 'babel-loader'
|
||||||
|
|
||||||
module.exports = babelLoader.custom(babel => {
|
module.exports = babelLoader.custom(babel => {
|
||||||
const presetItem = babel.createConfigItem(require('../../babel/preset'), {type: 'preset'})
|
const presetItem = babel.createConfigItem(require('../../babel/preset'), {type: 'preset'})
|
||||||
const reactJsxSourceItem = babel.createConfigItem(require('@babel/plugin-transform-react-jsx-source'), {type: 'plugin'})
|
|
||||||
|
|
||||||
const configs = new Set()
|
const configs = new Set()
|
||||||
|
|
||||||
|
@ -36,11 +35,6 @@ module.exports = babelLoader.custom(babel => {
|
||||||
options.presets = [...options.presets, presetItem]
|
options.presets = [...options.presets, presetItem]
|
||||||
}
|
}
|
||||||
|
|
||||||
options.plugins = [
|
|
||||||
...options.plugins,
|
|
||||||
dev && reactJsxSourceItem
|
|
||||||
].filter(Boolean)
|
|
||||||
|
|
||||||
return options
|
return options
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -66,7 +66,6 @@
|
||||||
"@babel/plugin-proposal-class-properties": "7.0.0",
|
"@babel/plugin-proposal-class-properties": "7.0.0",
|
||||||
"@babel/plugin-proposal-object-rest-spread": "7.0.0",
|
"@babel/plugin-proposal-object-rest-spread": "7.0.0",
|
||||||
"@babel/plugin-syntax-dynamic-import": "7.0.0",
|
"@babel/plugin-syntax-dynamic-import": "7.0.0",
|
||||||
"@babel/plugin-transform-react-jsx-source": "7.0.0",
|
|
||||||
"@babel/plugin-transform-runtime": "7.0.0",
|
"@babel/plugin-transform-runtime": "7.0.0",
|
||||||
"@babel/preset-env": "7.0.0",
|
"@babel/preset-env": "7.0.0",
|
||||||
"@babel/preset-react": "7.0.0",
|
"@babel/preset-react": "7.0.0",
|
||||||
|
|
|
@ -1,9 +1,5 @@
|
||||||
{
|
{
|
||||||
"presets": [
|
"presets": [
|
||||||
["next/babel", {
|
"next/babel"
|
||||||
"preset-env": {
|
|
||||||
"modules": "commonjs"
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue