标签：npm babel loader preset 版本 如下 安装

我们在使用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

标签：npm,babel,loader,preset,版本,如下,安装
来源： https://www.cnblogs.com/fqh2020/p/14758976.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。