preface

Babel is a must-have tool chain for front-end engineering today (unless you’re using a pre-ES6 syntax), primarily for converting ECMAScript 2015+ code into backwardly compatible versions of JavaScript code in older browsers or environments. Babel 7 was officially released in August 2018 with a number of usage and content updates that made it almost necessary to reinstall the NPM package and configure the Babel file. This article describes how to upgrade to Babel 7 from a previous version of Babel 6. Use the React project as an example.

start

The Babel configuration file in our project is placed in the **. Babelrc ** file.

You want to programmatically create the configuration? You want to compile node_modules? babel.config.js is for you! You have a static configuration that only applies to your simple single package? .babelrc is for you!

If your configuration file is simple, use.babelrc, but if you want more flexible dynamic configuration items, use babel.config.js. Choose to change the.babelrc file to babel.config.js, and then install the new Babel plug-in package.

In Babel 7, one of the most important upgrades is to change all packages to scoped packages. This will effectively avoid duplication or name grabbing, and will make naming more distinct from normal community packages. Babel /core** @babel/core**

npm install --save-dev @babel/core
Copy the code

Similarly, the rest of the components should also be renamed @babel. Before you are sure whether there is @babel format, you can go to Babel’s Chinese official website to search.

npm install --save-dev @babel/preset-env
npm install --save-dev @babel/preset-flow
npm install --save-dev @babel/preset-react
Copy the code

Presets can now be configured. Presets contain plugins that are already configured, simplifying the process of configuring your own plugins.

presets: [
      [
        '@babel/env',
        {
          'modules': false.'debug': false.'targets': {
            'browsers': [
              'last 2 versions'.'ie >= 11']}}],'@babel/react'.'@babel/flow'
    ]
Copy the code

The difference between this configuration and the old one is that you add @babel to the name of each preset. After installing the preset, you can install plug-ins according to your project requirements. **@babel/plugin-transform-runtime **@babel/plugin-transform-runtime **@babel/plugin-transform-runtime **@babel/plugin-transform-runtime Plug-ins like @babel/proposal-object-rest-spread and @babel/proposal-decorators** need to be reconfigured according to official documentation due to changes in configuration methods.

{
  plugins: [
      'lodash'['@babel/transform-runtime',
        {
          'corejs': false.'helpers': true.'regenerator': true.'useESModules': false}], ['@babel/proposal-object-rest-spread',
        {
          'loose': true.'useBuiltIns': true}], ['@babel/proposal-decorators',
        {
          'legacy': true}]].Copy the code

conclusion

The Babel plugin looks for the babel.config.js file in the root directory to execute when running a project, so you’re almost done.