Babel configuration file

In this section we learn Babel configuration, many tools have their own configuration files, such as ESLint profile for .eslintrc , Prettier profile for .prettierrc .

Babel also profiles, Babel profile is Babel default when executed in the current directory to find the file, there are .babelrc , .babelrc.js , babel.config.js , package.json file.

.babelrc

.babelrc file before, we can create a .babelrc file in the project root directory, and then enter the following:

 {
    "presets": [...],
    "plugins": [...]
  }

.babelrc.js

The configuration of the .babelrc.js .babelrc , but the file format is different. One is the json file and the other is the js file.

const presets = [ ... ];
const plugins = [ ... ];

module.exports = { presets, plugins };

You can also call Node.js any API , for example, be dynamically configured based process environment:

const presets = [ ... ];
const plugins = [ ... ];

if (process.env["ENV"] === "prod") {
  plugins.push(...);
}

module.exports = { presets, plugins };

babel.config.js

babel.config.js file in the project root directory, you can module.exports , for example:

module.exports = function (api) {
  api.cache(true);

  const presets = [ ... ];
  const plugins = [ ... ];

  return {
    presets,
    plugins
  };
}

.babelrc file is placed in the root directory of the project, the babel.config.js . We only need to choose one to create. If both types of configuration files exist, .babelrc will overwrite the configuration of babel.config.js

package.json

package.json file is no stranger to us. It can be created npm init Or we can also .babelrc configuration information as babel value of the key is added to the package.json file, as follows:

{
    "name": "demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "babel": {
      "presets": [...],
      "plugins": [...]
    }
}

Of course, in addition to writing the configuration in the above-mentioned configuration files, we can also write it in the configuration of the build tool. For different build tools, Babel also provides corresponding configuration items, such as the configuration items of webpack of babel-loader , the essence of which is the same as the configuration file.

The main configuration items in the configuration file are the two arrays plugins and presets plugins is the plug-in array, and presets is the preset array. Others such as ignore and minified are generally not used.

More links can be viewed: https://www.9xkd.com/