Webpack&React
齐奕
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")
)
最后执行webpack
类似资料：