Babel / Presets / Plugins und auch core-js müssen zuvor installiert werden, damit Babel wie unten beschrieben funktioniert:
npm i -D @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties babel-loader
Babel.config.js ist eine von mehreren Möglichkeiten den Transpile-Vorgang von Babel zu konfigurieren.
Hier können einzelne Babel-Plugins oder Presets definiert werden, die den JavaScript-Code geeignet übersetzen (das Resultat ist wiederrum JavaScript (Transpiling)). JavaScript ist "geeignet", wenn es in der Ziel-Umgebung läuft - also z. B. im Browser oder in einer anderen JavaScript-Umgebung (z. B. Node) - d. h. bei der Entwicklung kann ES2015+ JavaScript Syntax und Elemente verwendet werden, mit dem Transpiling kann es dann aber auch in einem ur-alten Internet Explorer 9 laufen.
/* eslint-disable no-console */
module.exports = function(api) {
// Should be set in webpack.config.js > babel-loader > option "envName"
// Currently not clear, how this can be derived from NODE_ENV.
const isDevelopment = api.env("development");
api.cache(true);
console.log("Babel is running in " + (isDevelopment ? "DEVELOPMENT" : "PRODUCTION"));
// For readability only - we use pushing of single presets to increase readability
// (because presets including options are also arrays)
const presets = [];
presets.push([
"@babel/preset-react",
{
// development = true automatically activates the plugins:
// which adds a "__source={ { fileName: 'this/file.js', lineNumber: 10 } }" to each tag which will helps for
// some error messages (e.g. if a component is created with <ComponentName /> but ComponentName is not a react component,
//
// 2. @babel/plugin-transform-react-jsx-self:
// which adds a "__self={this}" to each tag - but we don't know what this is for - according to this page
},
]);
// ES2015+ code to valid code compatible to browsers in browserslist
// (++ add core-js polyfills (map, generators, promise etc.)
// where non-available features are used (= where used = "usage"))
presets.push([
"@babel/preset-env",
{
corejs: 3, // Use core-js 3 for polyfills (core-js 3 must be installed for this option)
// CAUTION: The following fails in case node_modules are not touched by Babel (which is
// typically the case). So some relevant functions for IE (9-11) and other browsers
// will fail because the necessary polyfills are not added by default (if not used
// by your code directly).
// useBuiltIns: "usage", // Add polyfills only in files where used
// Adds polyfills on entry level based on the defined targets (independent whether they are
// used or not used in your code) which differs from the option "usage" above which
// will auto-add polyfills necessary in your own code.
// IMPORTANT: Add this import on the beginning of your entry:
// import "core-js/stable";
// import "regenerator-runtime/runtime";
// "core-js" and "regenerator-runtime" must be installed
// (=> "npm i core-js regenerator-runtime")
useBuiltIns: "entry",
//debug: true, // Optional: Shows debug output on command line
// We are using webpack modules (which are already transformed by webpack)
// so no need to transform them by babel - we could enforce this by setting
// this option to "false".
// However, we are also using jest under node where we must transform the
// ES6 module imports -> therefore we keep auto and let the environment
// (webpack, jest) decide themselves how to handle ES6 module imports:
modules: "auto",
targets: {
// You can use browserlist in package.json - BUT: If you have to specify
// the target node version for jest (see below) babel will ignore the
// package.json browserslist settings! Therefore you have to specify
// the target browsers here:
browsers: "last 2 versions, not dead, > 0.25%, ie 9, ie 10, ie 11",
// We are adding this for jest - because in case of useBuiltIns: "entry"
// we have no entry for jest (except we add additional entries to
// jest.init.js) and it fails with "ReferenceError: regeneratorRuntime
// is not defined"
node: "current",
},
},
]);
const plugins = [
"@babel/plugin-proposal-class-properties",
// No longer necessary when preset-env is used:
//"@babel/plugin-syntax-dynamic-import",
];
return {
presets,
plugins,
};
};