Webpack&React

最新推荐文章于 2024-05-07 10:53:36 发布

katsukichan

最新推荐文章于 2024-05-07 10:53:36 发布

阅读量255

点赞数 1

分类专栏： React

本文链接：https://blog.csdn.net/nep_chan/article/details/87435560

版权

React 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

Webpak基础使用参考博文Webpack基础&Vue

React中的JSX

信息来源Eno Yao

安装transform-react-jsx来实现 jsx 和 js 之间的转换，js文件遇到jsx语法时，执行webpack命令会转化为js语法

进入根目录
npm init //创建pack.json文件
安装依赖
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack --save-dev// 首先安装好 babel 环境
npm install --save-dev babel-plugin-transform-react-jsx // 再安装 transform-react-jsx 插件

文件结构

dist
	bundle.js   执行webpack生成
	index.html  引入bundle.js，用于本地打开查看
src
	katsuki.js
	react.js
webpack.config.js

配置webpack.config.js文件

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    // 定义生产环境
    mode: "development",
    // 入口
    entry: './src/katsuki.js',
    // 出口
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    // 加载器，处理非JS类型的文件(ES6)
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    // presets: ['@babel/preset-env']
                    plugins: ["transform-react-jsx"]
                }
            }
        }]
    },
    // 插件
    plugins: [
        new UglifyJsPlugin()
    ]
};

react.js
function createElement(type, props, ...children) {
    props = Object.assign({}, props);
    props.children = [].concat(...children)
        // 筛选
        .filter(child => child != null && child !== false)
        // 遍历操作 如果是对象则筛选掉(这里会筛选JSX对象和组件对象)，留下来文本节点进行处理
        .map(child => child instanceof Object ? child : createTextElement(child));
    return {
        type,
        props
    };
}

function createTextElement(value) {
    // 把文本节点从字符串变为对象{type:'TEXT_ELEMENT',props:{nodeValue:文本值}}
    // 注意文本节点没有传children，所以children是肯定是空数组
    return createElement('TEXT_ELEMENT', {
        nodeValue: value
    });
}

module.exports = {
    createElement,
    createTextElement
}

JSX转JS对象原理

katsuki.js
import React from "./react.js";
// JSX
let template = <div class="pink">
    <p name="katsuki">katsuki desu</p>
</div>
console.log(template); 

这段jsx通过webpack打包，在bundle.js变成下面的形式

createElement  第一个参数是节点的名字，第二个参数该标签属性的名字，第三个是标签内的内容
let template = React.createElement("div", {\n  "class": "pink"\n}, React.createElement("p", {\n  name: "katsuki"\n}, "katsuki desu"));

再通过react.js的React.createElement将其转化为对象，打印的template是对象形式

等价于下述操作
let JSXObj = React.createElement("div", {"class": "red"},"kasami")
console.log(JSXObj)
// 操作对象修改nodeValue
JSXObj.props.children[0].props.nodeValue = "katsuki"

JSX就是把HTML结构转化为JS对象
用JS对象来描述DOM结构
JS对象是跟DOM结构关联的，操作对象比操作DOM结构廉价

React实际上就是用这样的原理，把jsx转js对象，下一步再将js对象转真实dom结构，动态插入节点中，实现操作对象生成DOM而不是直接操作DOM，从而提高性能

执行下列步骤

cmd
npm install uglifyjs-webpack-plugin --save-dev //安装模块
webpack //执行打包
打开index.html文件

React配合Webpack使用

根据上面案例更改
删除react.js

dist
	bundle.js   执行webpack生成
	index.html  引入bundle.js，用于本地打开查看
src
	katsuki.js
webpack.config.js

npm install react react-dom --save

更改katsuki.js

katsuki.js
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <div>
        katsuki
    </div>,
    document.querySelector("#root")
)

更改index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
    <div id="root"></div>
    <script src="bundle.js"></script>
</body>
</html>

再更改成常用的组件化形式

dist
	bundle.js   执行webpack生成
	index.html  引入bundle.js，用于本地打开查看
src
    components
		katsuki.jsx
	katsuki.js	
webpack.config.js

webpack.config.js文件添加

module: {
    rules: [{
    	// 添加匹配jsx文件
        test: /\.js|jsx$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                // presets: ['@babel/preset-env']
                plugins: ["transform-react-jsx"]
            }
        }
    }]
}

katsuki.jsx
import React,{Component} from 'react';
export default class Xkatsuki extends Component {
    render() {
        return (
            <div>
                katsuki
            </div>
        );
    }
}

katsuki.js
import React from 'react';
import ReactDOM from 'react-dom';
import Xkatsuki from './components/katsuki.jsx'

ReactDOM.render(
    <div>
        <Xkatsuki />
    </div>,
    document.querySelector("#root")
)