sourcecred/config/babel.js
William Chargin 9b31905ab4
babel: transform ES6 modules to CommonJS (#766)
Summary:
The approach used by `create-react-app` (the source of this code) seems
to be the following: write everything as ES6 modules (`import`/`export`)
and bundle everything with Webpack—in particular, do not transform
modules with Babel.

This works fine until you want to also access some of these modules from
raw Node. Node only supports CommonJS modules, so these “polyglot”
modules must be CommonJS-compatible. But CommonJS modules are not nicely
compatible with ES6 modules: you need to set `exports.default` instead
of `module.exports` in the provider, and dereference `.default` after
each `require`. Babel will perform these transformations for us if we
ask it to. In this patch, we do so.

Test Plan:
Note that `yarn test --full` passes and `yarn start` still works.
(Follow-up commits will exercise this functionality.)

wchargin-branch: transform-es6-modules
2018-09-04 21:47:36 -07:00

153 lines
4.7 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// @flow
/**
* Copyright (c) 2018-present, SourceCred Authors.
* Copyright (c) 2015-2018, Facebook, Inc.
*
* Forked from babel-preset-react-app/index.js, which is released under
* the MIT license.
*/
const plugins = [
// Necessary to include regardless of the environment because
// in practice some other transforms (such as object-rest-spread)
// don't work without it: https://github.com/babel/babel/issues/7215
require.resolve("babel-plugin-transform-es2015-destructuring"),
// class { handleClick = () => { } }
require.resolve("babel-plugin-transform-class-properties"),
// The following two plugins use Object.assign directly, instead of Babel's
// extends helper. Note that this assumes `Object.assign` is available.
// { ...todo, completed: true }
[
require.resolve("babel-plugin-transform-object-rest-spread"),
{
useBuiltIns: true,
},
],
// Transforms JSX
[
require.resolve("babel-plugin-transform-react-jsx"),
{
useBuiltIns: true,
},
],
// Polyfills the runtime needed for async/await and generators
[
require.resolve("babel-plugin-transform-runtime"),
{
helpers: false,
polyfill: false,
regenerator: true,
},
],
];
// This is similar to how `env` works in Babel:
// https://babeljs.io/docs/usage/babelrc/#env-option
// We are not using `env` because its ignored in versions > babel-core@6.10.4:
// https://github.com/babel/babel/issues/4539
// https://github.com/facebookincubator/create-react-app/issues/720
// Its also nice that we can enforce `NODE_ENV` being specified.
var env = process.env.BABEL_ENV || process.env.NODE_ENV;
var backend = process.env.SOURCECRED_BACKEND === "true";
if (env !== "development" && env !== "test" && env !== "production") {
throw new Error(
"Using `babel-preset-react-app` requires that you specify `NODE_ENV` or " +
'`BABEL_ENV` environment variables. Valid values are "development", ' +
'"test", and "production". Instead, received: ' +
JSON.stringify(env) +
"."
);
}
if (env === "development" || env === "test") {
// 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
plugins.push.apply(plugins, [
// 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"),
]);
}
if (env === "test") {
module.exports = {
presets: [
// ES features necessary for user's Node version
[
require("babel-preset-env").default,
{
targets: {
node: "current",
},
},
],
// JSX, Flow
require.resolve("babel-preset-react"),
],
plugins: [
...plugins,
// Compiles import() to a deferred require()
require.resolve("babel-plugin-dynamic-import-node"),
],
};
} else {
module.exports = {
presets: [
// Latest stable ECMAScript features
[
require.resolve("babel-preset-env"),
{
targets: backend
? {
node: "current",
}
: {
ie: 9,
uglify: true,
},
// Disable polyfill transforms
useBuiltIns: false,
},
],
// JSX, Flow
require.resolve("babel-preset-react"),
],
plugins: [
...plugins,
...(backend
? [
// Must come before `babel-plugin-transform-regenerator`.
require.resolve("babel-plugin-transform-es2015-for-of"),
]
: [
// function* () { yield 42; yield 43; }
[
require.resolve("babel-plugin-transform-regenerator"),
{
// Async functions are converted to generators by
// babel-preset-env
async: false,
},
],
]),
// Adds syntax support for import()
require.resolve("babel-plugin-syntax-dynamic-import"),
],
};
if (env === "production") {
// Optimization: hoist JSX that never changes out of render()
// Disabled because of issues: https://github.com/facebookincubator/create-react-app/issues/553
// TODO: Enable again when these issues are resolved.
// plugins.push.apply(plugins, [
// require.resolve('babel-plugin-transform-react-constant-elements')
// ]);
}
}