9.babelrc配置

bable中配置es6、jsx语法

yarn安装

yarn add @babel/preset-env 
yarn add @babel/preset-react

package.json文件

 "@babel/preset-env": "^7.9.5",
 "@babel/preset-react": "^7.9.4",

.babelrc添加如下配置

{
  "presets": ["@babel/preset-env","@babel/preset-react"]
}

也可以将.babelrc配置放入webpack.config.js中不使用.babelrc 可以使用如下配置

{
  test:/\.js$/,
    exclude: /(node_modules)/,
      use: {
        loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react'
            ]
          }
      }
},

babel中配置可选链

"@babel/preset-env": "^7.8.7"以上版本集成了可选链的配置

可以直接使用可选链配置

const obj = {};
obj?.list?.picker?.a?.a?.a  => undefined
obj?.test ?? 'hello' => 'hello'

babel中配置decorators

{
  plugins: [
    "@babel/plugin-proposal-decorators",
    {
      "legacy": true
    }
  ],
}

babel中配置箭头函数

class App extends React.Component {
  state = {
    name:1
  }
  clickBtn = () => {
    console.log('hhh')
  }
}

可以在babel添加配置

{
  plugins: ["@babel/plugin-proposal-class-properties"]
}

babel配置typescript

yarn add @babel/preset-typescript

"presets": ["@babel/preset-env","@babel/preset-react","@babel/preset-typescript"],

babel配置去除console.log

["babel-plugin-transform-remove-console",{
      "exclude":["error","warn"]
    }]