用webpack搭建react项目（ 二 ）- 关于react 方面配置

1
2
cnpm i react react-dom -S

1
2
3
4
//导入的时候，接收的成员名称，必须这么写
import React from 'react'; //创建组件、虚拟dom、生命周期
import ReactDom from 'react-dom';//渲染虚拟dom至浏览器

1
2
3
//参数1 标签类型；参数2，属性；参数3 标签内内容
const myh1 = React.createElement('h1',{title: '呵呵'},'我是h1');

1
2
3
//参数1，虚拟dom；参数2，将要挂载的容器
ReactDom.render(myh1,'#app')

1
2
ReactDom.render(myh1,document.getElementById('app'))

1
2
const myh2 = <h1>我是第二个h1</h1>;

1
2
3
// babel核心包,babel-loader的核心依赖
cnpm i babel-loader @babel/core -D

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
    //webpack只能打包处理.js后缀名的文件，类似于.png，.vue无法主动处理，所以要配置第三方loader
    //webpack只要遇到无法识别的文件，就来module中找
    module: {
        // 第三方匹配规则
        //exclude是排除的意思。这个属性的意思就是不要去匹配node_modules目录中的文件。
        rules: [
            {test: /.js|jsx$/, use: 'babel-loader', exclude: /node_modules/}
        ]
    }
};

1
2
3
4
5
6
7
8
9
//ES语法分析包
cnpm i @babel/preset-env -D
//babel 编译时只转换语法，几乎可以编译所有时新的 JavaScript 语法，但并不会转化BOM（浏览器）里面不兼容的API。
//比如 Promise,Set,Symbol,Array.from,async 等等的一些API
//这2个包就是来搞定这些api的。
cnpm i @babel/runtime @babel/plugin-transform-runtime -D
//用来解析类的属性的
cnpm i @babel/plugin-proposal-class-properties -D 

1
2
3
4
5
6
7
{
   //语法
  "presets": ["@babel/preset-env"],
   //插件
  "plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]
}

1
2
cnpm i @babel/preset-react -D

1
2
3
4
 "presets": [
    "@babel/preset-react"
  ]