Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

preface

Recently, the Babel of the company’s project was upgraded because it was too old

A, webpack4. X

Use the Babel7.x version

Use:

  • babel-loader
  • @babel/core
  • @babel/preset-env
  • @babel/preset-react
  • @babel/plugin-proposal-class-properties
  • @babel/plugin-transform-runtime
  • Such as package

The installation

npm install babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D
Copy the code

bable.config.js

module.exports = {
    presets: [["@babel/env", { // babel7
            "targets": {         
            "edge": "17"."firefox": "60"."chrome": "67"."safari": "11.1",},"corejs": "2".// Specify the compiled version of Corejs, otherwise it will be warned when building the online environment
        "useBuiltIns": "usage",}]],plugins: 
    [    
        "@babel/plugin-transform-runtime"."@babel/plugin-syntax-dynamic-import"."@babel/plugin-proposal-object-rest-spread"."@vue/babel-plugin-transform-vue-jsx",]};Copy the code

\

Keep using babel6.x

Use:

  • [email protected]
  • babel-core babel-preset-env
  • babel-preset-react
  • babel-plugin-transform-runtime
  • Such as package
npm install babel-loader@7 babel-core babel-preset-env babel-preset-react babel-plugin-transform-runtime -D
Copy the code

Configuration:

bable.config.js

{ 
    "presets": ["env"."react"]."plugins": ["transform-runtime"]}Copy the code