解决babel安装时版本问题的坑

我们在使用JSX语法的时候需要安装babel,不然项目启动会报错

使用如下命令来安装babel插件,需要注意的是babel-loader需要指定版本为7.x,如果指定版本默认会下载最新版,是不兼容的。

  1. 运行 npm i babel-core babel-loader@7.1.5 babel-plugin-transform-runtime -D
  2. 运行 npm i babel-preset-env babel-preset-stage-0 babel-preset-react -D

然后webpack.config.js配置如下内容

    module: { //所有第三方 模块的配置规则
        rules: [ //第三方匹配规则
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
        ]

在根目录下创建一个.babelrc文件,加入如下配置

{
    "presets": [
        "env",
        "stage-0",
        "react"
    ],
    "plugins": [
        "transform-runtime"
    ]
}

然后通过npm run dev再启动项目就可以使用JSX语法了

如果项目还继续报错,可能是之前安装了babel-loader 需要先卸载再重新安装,具体操作如下:

  1. 运行 npm uninstall babel-loader -D
  2. 运行 npm install babel-loader@7.1.5 -D
上一篇:前端码农babel入门学习


下一篇:PresetManager的使用