时间:2021-07-01 10:21:17 帮助过:11人阅读
React提供了create-react-app的快速构建工具, 但作为一个专业的程序员(老司机), 面对复杂的项目, 入门级的构建工具, 是远远不够的, 我们这里从零开始, 用webpack, 手动配置一个独立的React开发环境, 开发环境完成后, 支持自动构建, 自动刷新, sass语法 等功能...
1. 首先用npm初始化环境
- mkdir react-webpack-demo
- cd react-webpack-demo
- npm init -y
安装相关软件包
- npm install react react-dom webpack webpack-cli webpack-dev-server html-webpack-plugin -D
- npm install babel-core babel-loader babel-plugin-transform-runtime -D
- npm install babel-preset-env babel-preset-stage-0 babel-preset-react -D
- # 识别html转换为jsx语法
- npm install babel-preset-react -D
2.添加对html静态文件的支持
输出的文件名为main output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js' }, // 配置开发服务器, 并配置自动刷新 devServer: { // 根目录下dist为基本目录 contentBase: path.join(__dirname, 'dist'), // 自动压缩代码 compress: true, // 服务端口为1208 port: 1208, // 自动打开浏览器 open: true }, // 装载虚拟目录插件 plugins: [htmlWebpackPlugin], }
- const path = require('path');
- const HtmlWebpackPlugin = require('html-webpack-plugin');
- // 负责将html文档虚拟到根目录下
- let htmlWebpackPlugin = new HtmlWebpackPlugin({
- // 虚拟的html文件名 index.html
- filename: 'index.html',
- // 虚拟html的模板为 src下的index.html
- template: path.resolve(__dirname, './src/index.html')
- })
- module.exports = {
- // 开发模式
- mode: 'development',
- // 配置入口文件
- entry: './src/index.js',
- // 出口文件目录为根目录下dist,
在package.json内scripts中添加"dev": "webpack-dev-server"
在src/index.html中添加内容
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>react-webpack-demo</title>
- </head>
- <body>
- react-webpack-demo
- <hr>
- 高堂明镜悲白发, 朝如青丝暮成雪
- </body>
- </html>
在命令行内运行npm run dev, 即可看到刚添加的index.html内容
接下来我们配置babel对es6语法的支持, 以及对jsx语法的支持
3. 添加对js高级语法的支持
在项目根目录, 添加.babelrc配置文件 presets为语法配置,plugins为插件配置
- {
- "presets": ["env", "stage-0", "react"],
- "plugins": ["transform-runtime"]
- }
在webpack.config.js中添加module字段, 进行插件loader配置
- // webpack.config.js
- module.exports = {
- ...
- // 配置loader
- module: {
- // 根据文件后缀匹配规则
- rules: [
- // 配置js/jsx语法解析
- { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
- ]
- }
- };
在src/index.html中加入id为root的div节点
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>react-webpack-demo</title>
- </head>
- <body>
- react-webpack-demo
- <hr>
- 高堂明镜悲白发, 朝如青丝暮成雪
- <hr>
- <div id="root"></div>
- </body>
- </html>
在src/index.js中加入包含jsx语法的react组件
- import React from 'react';
- import ReactDOM from 'react-dom';
- class Counter extends React.Component {
- constructor(props) {
- super(props);
- this.state = { number: 0 };
- this.decrease = this.decrease.bind(this);
- this.increase = this.increase.bind(this);
- }
- // 加1
- increase() {
- let self = this;
- self.setState({ number: self.state.number + 1 })
- }
- // 减一
- decrease() {
- let self = this;
- self.setState({ number: self.state.number - 1 })
- }
- render() {
- return (
- <div>
- <input type = "button" value = "减1"onClick = { this.decrease }/>
- <span> { this.state.number } </span>
- <input type = "button" value = "加1" onClick = { this.increase }/>
- </div> )
- }
- }
- ReactDOM.render(<Counter /> , document.getElementById('root'))
附录: 添加对sass语法的支持(没兴趣可以跳过)
安装sass相关的loader
- npm install style-loader css-loader node-sass sass-loader -D
在webpack.config.js内新增规则
- // webpack.config.js
- module.exports = {
- ...
- module: {
- rules: [{
- test: /\.scss$/,
- use: [
- "style-loader", // creates style nodes from JS strings
- "css-loader", // translates CSS into CommonJS
- "sass-loader" // compiles Sass to CSS
- ]
- }]
- }
- };
在src内新增index.scss
- $designWidth: 750;
- @function px2rem($px) {
- @return $px*10/$designWidth + rem;
- }
- #root {
- div {
- font-size: px2rem(500);
- display: flex;
- color: #64B587;
- input {
- flex: 1 1 auto;
- }
- span {
- flex: 1 1 auto;
- text-align: center;
- }
- }
- }
在index.js中新增import index.scss
最终效果:
文中相关资源链接:链接: https://pan.baidu.com/s/10PYXo_WoIScn-IFRdtuc5w 密码: td78
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。