react全家桶2-bebel7

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m0_37975886/article/details/86571357

一、下载包

版本7将系列插件都放在了@babel家族下，我的项目使用了react和webpack ,使用npm下载包的代码如下：

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react babel-loader
npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save @babel/polyfill @babel/runtime react react-dom react-router-dom

二、写配置文件

官网原文：

What's your use case?

• 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!

• The Guy Fieri is your hero?

We recommend to use the babel.config.js format. Babel itself is using it.

版本7里，除了原来的.babelrc配置外，多了一个babel.config.js文件并且是推荐使用的，放在根目录路径下，配置示例如下：

module.exports = {
    presets: [
      ['@babel/preset-env', { modules: false }],
      '@babel/preset-react'
    ]
  }

在webpack.config.js中，也配置好使用babel-loader解析js/jsx文件

module:{
        rules:[
            {
                test: /(\.jsx|\.js)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },

到这里，配置完成，可以写一段jsx代码测试一下

index.js

import React from 'react';
import ReactDom from 'react-dom';
// import App from './views/App';

ReactDom.render(
    <div>啦啦啦</div>,
    document.getElementById('root')
)

此时编译成功后可在浏览器上看到‘啦啦啦’

具体如何配置webpack使之运行，请看上一篇react全家桶1-webpack