本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目。文中针对react、webpack、babel、react-route、redux、redux-saga的核心配置会加以讲解,希望通过这个项目,可以系统的了解react技术栈的主要知识,避免搭建一次后面就忘记的情况。
代码库:https://github.com/teapot-py/react-demo
首先关于主要的npm包版本列一下:
- [email protected]
- [email protected]
- babel@7+
- [email protected]
- redux@4+
从webpack开始
思考一下webpack到底做了什么事情?其实简单来说,就是从入口文件开始,不断寻找依赖,同时为了解析各种不同的文件加载相应的loader,最后生成我们希望的类型的目标文件。
这个过程就像是在一个迷宫里寻宝,我们从入口进入,同时我们也会不断的接收到下一处宝藏的提示信息,我们对信息进行解码,而解码的时候可能需要一些工具,比如说钥匙,而loader就像是这样的钥匙,然后得到我们可以识别的内容。
回到我们的项目,首先进行项目的初始化,分别执行如下命令
mkdir react-demo // 新建项目文件夹
cd react-demo // cd到项目目录下
npm init // npm初始化
复制代码
引入webpack
npm i webpack --save
touch webpack.config.js
复制代码
对webpack进行简单配置,更新webpack.config.js
const path = require('path');
module.exports = {
entry: './app.js', // 入口文件
output: {
path: path.resolve(__dirname, 'dist'), // 定义输出目录
filename: 'my-first-webpack.bundle.js' // 定义输出文件名称
}
};
复制代码
更新package.json文件,在scripts中添加webpack执行命令
"scripts": {
"dev": "./node_modules/.bin/webpack --config webpack.config.js"
}
复制代码
如果有报错请按提示安装webpack-cli
npm i webpack-cli
复制代码
执行webpack
npm run dev
复制代码
如果在项目文件夹下生成了dist文件,说明我们的配置是没有问题的。
接入react
安装react相关包
npm install react react-dom --save
复制代码
更新app.js入口文件
import React from 'react
import ReactDom from 'react-dom';
import App from './src/views/App';
ReactDom.render( , document.getElementById('root'));
复制代码
创建目录 src/views/App,在App目录下,新建index.js文件作为App组件,index.js文件内容如下:
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (App Container);
}
}
export default App;
复制代码
在根目录下创建模板文件index.html
index
"utf-8">
"viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
"root">
复制代码
到了这一步其实关于react的引入就OK了,不过目前还有很多问题没有解决
- 如何解析JS文件的代码?
- 如何将js文件加入模板文件中?
Babel解析js文件
Babel是一个工具链,主要用于在旧的浏览器或环境中将ECMAScript2015+的代码转换为向后兼容版本的JavaScript代码。
安装babel-loader,@babel/core,@babel/preset-env,@babel/preset-react
npm i babel-loader@8 @babel/core @babel/preset-env @babel/preset-react -D
复制代码
- babel-loader:使用Babel转换JavaScript依赖关系的Webpack加载器, 简单来讲就是webpack和babel中间层,允许webpack在遇到js文件时用bable来解析
- @babel/core:即babel-core,将ES6代码转换为ES5。7.0之后,包名升级为@babel/core。@babel相当于一种官方标记,和以前大家随便起名形成区别。
- @babel/preset-env:即babel-preset-env,根据您要支持的浏览器,决定使用哪些transformations / plugins 和 polyfills,例如为旧浏览器提供现代浏览器的新特性。
- @babel/preset-react:即 babel-preset-react,针对所有React插件的Babel预设,例如将JSX转换为函数.
更新webpack.config.js
module: {
rules: [
{
test: /\.js$/, // 匹配.js文件
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
复制代码
根目录下创建并配置.babelrc文件
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
复制代码
配置HtmlWebPackPlugin
这个插件最主要的作用是将js代码通过