安装babel插件

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 babel-preset-react -D

安装jsx语法包

cnpm i babel-preset-react -D

在根目录添加.babelrc配置文件

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

}

配置规则

在webpack.config.js中配置规则

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

配置完成后webpack.config.js完整代码如下

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');//导入 在内存中自动生成index页面的插件

//创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    template:path.join(__dirname,'./src/index.html'),//源文件
    filename:'index.html'//生成的内存中的首页名称
})
module.exports = {
    mode:'development', //development开发。production 发布
    plugins:[
        htmlPlugin
    ],
    module:{
        //所有第三方模块的匹配规则
        rules:[
            {test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/},
        ]

使用


//这两个导入的时候，接收的成员名称，必须这么写
import React from 'react'//创建组件、虚拟dom元素，生命周期
import ReactDOM from 'react-dom'//把创建好的组件和虚拟dom放到页面上展示



/*
<div><h1 id = "myh1" title="this is title">hello pawn</h1></div>
*/

/*
html是最优秀的标记语言：
在js文件中，默认不能写这种类似于html的标记，否则打包会失败
可以使用babel来转换这些标签
这种在js中混合html的语法，叫做jsx语法，符合xml规范的js
但是jsx的本质还是转换成React.createElement来执行的
*/

const mydiv = <h1>hello ß1pawn</h1>

/*
参数1:要渲染的那个虚拟dom元素
参数2:指定页面上一个容器
*/
ReactDOM.render(mydiv,document.getElementById('app'))

但是输入启动命令时却报错，