时间:2023-09-07 09:47:06 点击次数:20
本文作者:IMWeb 黄qiong 未经同意,禁止转载
看到一篇还不错的文章,翻译(也不是完全翻译,还是改动了一点点让它变得更易理解)了一波,想看原文的移步
Tutorial: How to set up React, webpack 4, and Babel 7 (2018)www.valentinog.com/blog/react-webpack-babel/#How_to_set_up_React_Webpack_and_Babel_what_you_will_learn顺便推荐一下这个小哥的文章都写的挺好的~。
1.如何安装配置webpack
2.如何安装配置babel
3.如何安装react
4.如何创建两种React Component --- 容器/展示组件
5.在html文件中引用webpack生成的bundle文件
6.如何安装使用webpack dev server
首先我们先给项目创建一个文件夹 webpack-react-tutorial:
mkdir webpack-react-tutorial && cd webpack-react-tutorial接着在这个文件夹下创建一个src的子文件夹:
mkdir -p src初始化项目:
npm init -ywebpack
webpack是一款非常有用的前端打包工具,了解如何使用它是React开发者的基础,因为webpack可以将React组件转化成几乎所有浏览器都可以运行的JS code。
让我们先来安装它:
npm i webpack --save-dev你可能会需要webpack-cli,所以也先装上
npm i webpack-cli --save-dev接着在package.json里添加webpack的指令
"scripts": { "build": "webpack --mode production" }到目前为止还不需要写webpack的配置文件。
下面我们来安装和配置Babel来编译我们的代码。
为什么要使用Babel?
React Component大多是用JS ES6语法来写的,而有些浏览器没办法运行ES6的语法,所以就需要工具来将ES6的代码转化成浏览器可以运行的代码(通常是es5的语法)。
webpack本身是不会做这件事情的,需要靠转换器:loader。
一个webpack loader作用就是把输入进去的文件转化成指定的文件格式输出。其中babel-loader负责将传入的es6文件转化成浏览器可以运行的文件。
babel-loader需要利用Babel,所以需要预先将Babel配置好。
babel preset env:将ES6的代码转成ES5(注意:babel-preset-es2015已经被废弃了)
2.babel preset react: 将JSX语法编译成JS
接着安装这两个依赖:
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev不要忘了配置Babel! 首先要在webpack-react-tutorial文件夹里新建一个文件.babelrc,内容为
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }到这个时候,就可以写一小部分webpack的配置文件了。
创建一个新的文件webpack.config.js,内容为
const path = require(path); module.exports = { entry: ./src/index.js, output: { filename: bundle.js, path: path.resolve(__dirname, dist) } module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } } ] } };这个webpack的配置很简单。意思就是所有以.js结尾的文件都会用babel-loader把ES6编译转化成ES5的文件。
同时它定义了输入文件的路径为 src/index.js,输出为dist/bundle.js。webpack 4里这两行代码你不写也行,webpack会默认帮你加,但是为了代码可读性,我们还是把它加上。
配置完成之后,我们就可以开始写React 组件了。
这里会写两种React组件:容器、展示组件。如果不了解这两种组件概念的同学可以先了解一下。
简单来说: 容器跟展示组件是React组件的两种模式。
容器组件: 一般比较重数据处理的逻辑会写在这,比如监听外界传入(例如redux) state的变化,或者处理组件内部的state,等等。
展示组件:顾名思义,就是仅仅用来展示的。它一般都是一个纯箭头函数,接受容器组件通过props传来的数据,然后展示我们希望展示的html结构。
在下面的例子中,你会看到它们长啥样。
在本节中,我们来创建只有text input 的超级简单的React表单。
首先先把React库引进来:
npm i react react-dom --save-dev然后创建两个子文件夹来分别放React 容器/展示组件
mkdir -p src/js/components/{container,presentational}接着我们来写一个容器组件,它有下面的特点
有自己的state渲染一个html表单将这个容器组件放在container里
touch src/js/components/container/FormContainer.js容器组件的代码如下:
import React, { Component } from "react"; import ReactDOM from "react-dom"; class FormContainer extends Component { constructor() { super(); this.state = { title: "" }; } render() { return ( <form id="article-form"> </form> ); } } export default FormContainer;到目前为止,这个组件还没啥用,它只是一个包裹着子展示组件的外壳。
所以我们来定义一下子组件Input吧。
我们知道html input有下列的属性:
typeclassidvaluerequired所有的这些属性都由容器组件通过props传给它,这种组件叫做controlled component。
写一个react组件,最好给它加上Prop Types,这样一来可以做输入的数据类型检测,二来别人用你的组件,可以很快知道这个组件需要什么input。
安装prop-types
npm i prop-types --save-dev接着写这个展示组件
import React from "react"; import PropTypes from "prop-types"; const Input = ({ label, text, type, id, value, handleChange }) => ( <div className="form-group"> <label htmlFor={label}>{text}</label> <input type={type} className="form-control" id={id} value={value} onChange={handleChange} required /> </div> ); Input.propTypes = { label: PropTypes.string.isRequired, text: PropTypes.string.isRequired, type: PropTypes.string.isRequired, id: PropTypes.string.isRequired, value: PropTypes.string.isRequired, handleChange: PropTypes.func.isRequired }; export default Input;到这一步我们就可以在容器组件里渲染Input这个子组件了
import React, { Component } from "react"; import ReactDOM from "react-dom"; import Input from "../presentational/Input"; class FormContainer extends Component { constructor() { super(); this.state = { seo_title: "" }; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({ [event.target.id]: event.target.value }); } render() { const { seo_title } = this.state; return ( <form id="article-form"> <Input text="SEO title" label="seo_title" type="text" id="seo_title" value={seo_title} handleChange={this.handleChange} /> </form> ); } } export default FormContainer;写好组件之后,就可以用webpack来打包这些代码啦。
由于前面我们已经定义了webpack入口文件是 ./src/index.js,所以我们先创建一个index.js文件,在里面引入React组件
import FormContainer from "./js/components/container/FormContainer";写好之后,激动人心的时刻到了! 我们终于可以通过运行 npm run build 来生成打包文件,由于我们在配置里定义了输出文件为:dist/bundle.js,所以一切顺利的话, 你现在应该可以看到一个新生成的dist文件,里面有一个bundle.js文件。
为了展示我们的React组件,我们需要让webpack生成一个html文件。上面我们生成的bundle.js就会放在这个html文件的script标签里。
webpack需要两个工具来生成这个html文件:html-webpack-plugin跟html-loader
首先添加这两个依赖:
npm i html-webpack-plugin html-loader --save-dev然后更新webpack的配置文件
const HtmlWebPackPlugin = require("html-webpack-plugin"); module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, { test: /\.html$/, use: [ { loader: "html-loader" } ] } ] }, plugins: [ new HtmlWebPackPlugin({ title: Set Up Project, filename: "./index.html" }) ] };index.html是我们的模板文件,里面定义了React Component需要插入进入的容器<div>create-article-form</div>,不要忘了在FormContainer里用React.render绑定这个。
<!doctype html> <html> <head> <title>Getting Started</title> </head> <body> <div id=create-article-form> </div> </body> </html>在./src/js/components/container/FormContainer.js 加上下面的代码:
const wrapper = document.getElementById("create-article-form"); wrapper ? ReactDOM.render(<FormContainer />, wrapper) : false;最后,在跑一次构建: npm run build
这时候在dist文件夹里就会看到生成的html文件,由于html-webpack-plugin,bundle文件会被自动注入html里。 在浏览器里打开./dist/index.html,你会看到这个React表单。
目前为止,我们来遗留一个问题:每次修改文件的时候,都需要重新跑一次编译
npm run build这样是很麻烦的,我们想达到的效果是自动重新编译。 达到这个目标很简单,只需要3行配置就可以启动运行一个开发服务器。
启动服务器之后webpack就会在浏览器里启动你的应用,而且当你修改保存代码之后,webpack dev server还会自动刷新浏览器的窗口。
在启动webpack dev server前,需要先安装npm i webpack-dev-server --save-dev
打开package.json 加入start script
"scripts": { "start": "webpack-dev-server --open --mode development", "build": "webpack" }保存这个文件,最后在跑这个命令 npm start
你会在你的浏览器里看到你的应用。
接下来你可以随意修改一下文件内容,会看到webpack dev server会自动刷新浏览器窗口。
通过上面的学习,我们已经看到如何从零用webpack 与Babel搭建一个React项目,包括
如何安装配置webpack如何安装配置Babel如何安装React如何创建React容器/展示组件如何在html里插入bundle文件如何安装和配置webpack dev server如果你想了解更多webpack 4的知识,可以移步这篇
Webpack 4 Tutorial: from 0 Conf to Production Mode (Updated)www.valentinog.com/blog/webpack-tutorial/参考文档:
Tutorial: How to set up React, Webpack 4, and Babel 7 (2018)www.valentinog.com/blog/react-webpack-babel/#How_to_set_up_React_Webpack_and_Babel_what_you_will_learn