阅读 48

(webpack篇)6.配置React开发

说明:通过babel配置react开发语法
本系列都是连贯的,有些配置前面介绍过。

一、安装

npm install react react-dom --save
npm install --save-dev @babel/preset-react

二、配置

  • 1.说明

这里我们将webpack.config.js中关于babel-loader配置新建了babel的配置文件。

  • 2.新建.babelrc

在项目根目录下创建,添加内容

{
    "presets": [
        [
            "@babel/preset-env", {
                "targets": {
                    "chrome": "67"
                },
                "useBuiltIns": "usage"
            }
        ],
        "@babel/preset-react"
    ]
}
复制代码
  • 3.修改webpack.config.js中内容
...
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: "babel-loader"  // 配置挪出去了
        }
        ...
        ]
    },
    ...
}
复制代码

三、测试React代码

  • 1.代码

项目中src/index

import React, { Component } from 'react';
import ReactDom from 'react-dom'

class App extends Component {
    render() {
        return <div>Hello World</div>
    }
}

ReactDom.render(<App />, document.getElementById('root'));
复制代码
  • 2.效果展示

npm run serve 启动

image.png

文章分类
前端
文章标签