Last active
November 28, 2024 00:45
-
-
Save nodkz/41e189ff22325a27fe6a5ca81df2cb91 to your computer and use it in GitHub Desktop.
Babel 7.0 with .babelrc.js DEPRECATED! This config was created when babel 7 was in beta
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* eslint-disable prefer-template */ | |
const path = require('path'); | |
const aliases = require('./aliases'); | |
// /////////////////////////////////////////////////////////////// | |
// ////////////////// PLUGINS //////////////////////////////// | |
// /////////////////////////////////////////////////////////////// | |
const commonPlugins = [ | |
[ | |
require.resolve('babel-plugin-module-resolver'), | |
{ | |
root: [path.resolve('./')], | |
alias: aliases, | |
}, | |
], | |
]; | |
const relayTransformWatchPlugin = [ | |
require.resolve('babel-plugin-transform-relay-hot'), | |
{ | |
schema: './build/schema.graphql.json', | |
watchInterval: 2000, | |
}, | |
]; | |
const relayTransformStaticPlugin = [ | |
require.resolve('babel-plugin-transform-relay-hot'), | |
{ | |
schema: './build/schema.graphql.json', | |
watchInterval: 0, // disable watch | |
}, | |
]; | |
const commonNodePlugins = [ | |
// Compiles import() to a deferred require() | |
// require.resolve('babel-plugin-dynamic-import-node'), | |
[ | |
require.resolve('babel-plugin-import-inspector'), | |
{ | |
serverSideRequirePath: true, | |
webpackRequireWeakId: true, | |
}, | |
], | |
]; | |
const commonBrowserPlugins = [ | |
// Adds syntax support for import() | |
// Does not work with Webpack dynamic import. Eg. for SvgIcons | |
// require.resolve('babel-plugin-syntax-dynamic-import'), | |
[ | |
require.resolve('babel-plugin-import-inspector'), | |
{ | |
webpackRequireWeakId: true, | |
}, | |
], | |
]; | |
const reactDevelopmentPlugins = [ | |
// The following two plugins are currently necessary to make React warnings | |
// include more valuable information. They are included here because they are | |
// currently not enabled in babel-preset-react. See the below threads for more info: | |
// https://github.com/babel/babel/issues/4702 | |
// https://github.com/babel/babel/pull/3540#issuecomment-228673661 | |
// https://github.com/facebookincubator/create-react-app/issues/989 | |
// Adds component stack to warning messages | |
require.resolve('babel-plugin-transform-react-jsx-source'), | |
// Adds __self attribute to JSX which React will use for some warnings | |
require.resolve('babel-plugin-transform-react-jsx-self'), | |
]; | |
const reactProductionPlugins = [ | |
// improve production build, | |
// see https://medium.com/doctolib-engineering/improve-react-performance-with-babel-16f1becfaa25 | |
require.resolve('babel-plugin-transform-react-remove-prop-types'), | |
require.resolve('babel-plugin-transform-react-inline-elements'), | |
// Optimization: hoist JSX that never changes out of render() | |
// Disabled because of issues: | |
// * https://github.com/facebookincubator/create-react-app/issues/525 | |
// * https://phabricator.babeljs.io/search/query/pCNlnC2xzwzx/ | |
// * https://github.com/babel/babel/issues/4516 | |
// TODO: Enable again when these issues are resolved. | |
// require.resolve('babel-plugin-transform-react-constant-elements') | |
]; | |
const inlineImportPlugin = [ | |
require.resolve('babel-plugin-inline-import'), | |
{ extensions: ['.mjml', '.txt'] }, | |
]; | |
// /////////////////////////////////////////////////////////////// | |
// ////////////////// PRESETS //////////////////////////////// | |
// /////////////////////////////////////////////////////////////// | |
// ES features necessary for user's Node version | |
const nodeDevelopmentPreset = [ | |
require.resolve('babel-preset-env'), | |
{ | |
targets: { | |
node: 'current', | |
}, | |
}, | |
]; | |
const nodeProductionPreset = [ | |
require.resolve('babel-preset-env'), | |
{ | |
targets: { | |
node: '6.9.4', | |
}, | |
}, | |
]; | |
// Latest stable ECMAScript features | |
const browserProductionPreset = [ | |
require.resolve('babel-preset-env'), | |
{ | |
targets: { | |
// React parses on ie 9, so we should too | |
ie: 9, | |
// We currently minify with uglify | |
// Remove after https://github.com/mishoo/UglifyJS2/issues/448 | |
uglify: true, | |
}, | |
// Disable polyfill transforms | |
useBuiltIns: false, | |
// Do not transform modules to CJS | |
modules: false, | |
}, | |
]; | |
const browserDevelopmentPreset = [ | |
require.resolve('babel-preset-env'), | |
{ | |
targets: { | |
// chrome: 55, | |
browsers: ['last 2 versions', 'safari >= 10'], | |
}, | |
// Disable polyfill transforms | |
useBuiltIns: false, | |
// Do not transform modules to CJS | |
modules: false, | |
}, | |
]; | |
// JSX, Flow | |
const reactPreset = require.resolve('babel-preset-react'); | |
// /////////////////////////////////////////////////////////////// | |
// ////////////////// EXPORT ///////////////////////////////// | |
// /////////////////////////////////////////////////////////////// | |
module.exports = { | |
presets: [reactPreset, 'stage-0'], | |
plugins: [...commonPlugins], | |
env: { | |
browser_development: { | |
presets: [browserDevelopmentPreset, reactPreset, 'stage-0'], | |
plugins: [ | |
...reactDevelopmentPlugins, | |
...commonBrowserPlugins, | |
relayTransformWatchPlugin, | |
], | |
}, | |
browser_production: { | |
presets: [browserProductionPreset, reactPreset, 'stage-0'], | |
plugins: [relayTransformStaticPlugin, ...reactProductionPlugins, ...commonBrowserPlugins], | |
}, | |
server_development: { | |
presets: [nodeDevelopmentPreset, reactPreset, 'stage-0'], | |
plugins: [...commonNodePlugins, ...reactDevelopmentPlugins, relayTransformWatchPlugin], | |
}, | |
server_production: { | |
presets: [nodeProductionPreset, reactPreset, 'stage-0'], | |
plugins: [...commonNodePlugins, relayTransformStaticPlugin, ...reactProductionPlugins], | |
}, | |
test: { | |
presets: [nodeDevelopmentPreset, reactPreset, 'stage-0'], | |
plugins: [...commonNodePlugins, ...reactDevelopmentPlugins, relayTransformWatchPlugin], | |
}, | |
scripts: { | |
presets: [nodeDevelopmentPreset, reactPreset, 'stage-0'], | |
plugins: [inlineImportPlugin], | |
}, | |
}, | |
}; |
Cheers for this one!
thanks
You have taken stage-0, isnt it deprecated as per Babel 7 https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
DEPRECATED! This config was created when babel 7 was in beta
thanks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Great! This is helpful.