react+webpack项目中的babel配置

共计 321 字，约需阅读 1.17 分钟

babel配置位置

  • 项目根目录.babelrc中配置，json格式

    1
    2
    3
    4
    {
        "presets": ["预设条件"],
        "plugins": ["插件"],
    }

  • 在package.json文件中配置

    1
    2
    3
    4
    5
    6
    7
    {
        "name": "project",
        "version": "0.0.1",
        "babel": {
            // babel配置
        }
    }

react中的babel配置

  • react解析jsx语法，npm install babel-preset-react安装相关依赖

  • es2015解析es6语法，npm install babel-preset-es2015安装相关依赖

  • es提案各个阶段的语法支持插件，npm install babel-preset-stage-0 babel-preset-stage-1 babel-preset-stage-2 babel-preset-stage-3安装相关依赖

    1
    2
    3
    4
    {
        "presets": ["react", "es2015"],
        "plugins": ["插件"],
    }

配置示例

  • 无参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {
        "presets": [
            "react",
            "es2015"
        ],
        "plugins": [
            "transform-es2015-arrow-functions", //转译箭头函数
            "transform-es2015-classes", //转译class语法
            "transform-es2015-spread", //转译数组解构
            "transform-es2015-for-of" //转译for-of
        ]
    }

  • 有参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {
        "presets": [
            "react",
            "es2015"
        ],
        "plugins": [
            //改为数组，第二个元素为配置项
            ["transform-es2015-arrow-functions", { "spec": true }]
        ]
    }

说明

参考资源