react环境搭建(二)

//https://www.babeljs.cn/

需要用到的babel插件

npm install
@babel/core
babel-loader  
//https://www.babeljs.cn/docs/babel-preset-env

@babel/preset-env   core-js
//https://www.babeljs.cn/docs/babel-preset-react
//当设置为 automatic 时，将自动导入（import）JSX 转换而来的函数。当设置为 classic 时，不会自动导入（import）任何东西。

@babel/plugin-transform-runtime
//使用装饰器依赖

@babel/plugin-proposal-decorators

@babel/plugin-proposal-object-rest-spread

@babel/plugin-proposal-class-properties
此插件包含在@babel/preset-react 将自动导入 JSX 编译成的函数

@babel/plugin-transform-react-jsx
@babel/preset-react

--save-dev
babel.config.js

module.exports = {
    presets: [
        [
            "@babel/preset-env",
            {
                useBuiltIns: 'usage',
                corejs: 3
            }
        ],
        [
            "@babel/preset-react",
            {
                'runtime': 'automatic',
            }
        ]
    ],
    plugins: [
        [
            '@babel/plugin-proposal-decorators',
            {
                legacy: true,
            },
        ],
        [
            '@babel/plugin-transform-react-jsx',
            {
                'runtime': 'automatic',
            },
        ],
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-transform-runtime',
    ]
}

 这个主要是babel相关配置，下篇继续深入