[React][2020] webpack 4.x 项目中配置解析 jsx 语法的babel-loader全流程

[React][2020] webpack 4.x 项目中配置解析 jsx 语法的babel-loader全流程

目录

1. 安装babel插件
2. 安装babel用于解析jsx语法的包
3. 配置 webpack.config.js
4. 配置 .babelrc 文件

正文

提示: 本文使用的babel及相关插件皆为最新版本，如果需要老版本切勿参考本文

• 版本信息

"babel-loader": "^8.1.0"
"@babel/core": "^7.9.6"
"@babel/plugin-transform-runtime": "^7.9.6"
"@babel/preset-env": "^7.9.6"
"@babel/preset-react": "^7.9.4

1. 使用 npm 安装 babel 插件(当前最新babel-loader已经是8版本)

npm i babel-loader @babel/core @babel/preset-env -D
npm i @babel/plugin-transform-runtime -D

• -D : 安装到生产环境中，构建之后仍会存在，该插件需要
• 如果 npm 太慢 可以使用 cnpm 或者 指定镜像地址(在末尾加上下面这行)甚至也可以 使用 nrm

–registry=http://registry.npm.taobao.org

2. 安装能够识别转换JSX语法的包

npm i @babel/preset-react -D

3. 配置 webpack.config.js 文件

module:{   // 第三方模块配置规则
    rules:[
        {test:/\.js|jsx$/ , use:{
            loader:'babel-loader',
            options: {
                presets:['@babel/preset-env']}
        }, exclude: /node_modules/}    // 添加排除项
    ]
}

• 如果没有module这个模块，配置到暴露对象 module.exports 中。

// 仅供参考 请按照实际需要进行配置
module.exports = {
    mode:'development', // development开发 production生产
    plugins:[
        htmlPlugin
    ],
    module:{
        rules:[
            {test:/\.js|jsx$/ , use:{
                loader:'babel-loader',
                options: {
                    presets:['@babel/preset-env']}
            }, exclude: /node_modules/}    // 添加排除项
        ]
    }
}

4. 添加 .babelrc 文件，并进行配置

{
	"presets":["@babel/env", "@babel/react"],
	"plugins":["@babel/plugin-transform-runtime"]
}

5. npm run dev 运行项目(前提是配置了webpack的dev)

创作不易 感谢阅读