react流程搭建项目
2021-03-23 本文已影响0人
小棋子js
直接用自己构建的模板
https://gitee.com/cwq1211/create-react-app
react项目构建使用脚手架：create-react-app
npm install -g create-react-app
create-react-app reactdemo
cd reactdemo
npm start
用webpack从零配置开始搭建React项目
技术栈：webpack4 + react + react-router-dom
1、初始化项目，安装插件
- 先建立一个文件夹，然后初始化package.json
mkdir react-demo && cd react-demo //建立react-demo并进入react-demo
npm init -y //快速初始化package.json
然后就会发现react-dome生成一个package.json，我们安装的插件，信息都在这个文件里面。
- 安装相关webpack的插件
开始安装react的插件，首先要安装webpack的插件，我用yarn来管理插件，也可以用npm。
需要安装的插件：
1、webpack
2、webpack-cli：webpack的命令工具，既然安装webpack，就必要安装这个
3、webpack-dev-server：启动http服务
4、webpack-merge: 引用通用的配置来组合，比如开发环境的配置和生产环境的配置共用一个common.js
yarn add webpack webpack-cli webpack-dev-server webpack-merge --dev
- 安装相关react的插件
目前就安装react，react-dom
yarn add react react-dom
- 安装相关babel的插件
既然用react，那就需要用到babel的插件
需要的插件
1、babel-loader：文件处理器，加载js文件
2、@babel/core：最新的版本，之前是babel-core，是babel的核心功能
3、@babel/preset-env：也是最新的版本，之前是babel-preset-env。因为webpack不能识别es6以上，所以需要这个插件来转换es5
4、@babel/preset-react：也是最新的版本，之前是babel-preset-react，用来转换react的语法
yarn add babel-loader @babel/core @babel/preset-env @babel/preset-react --dev
- 安装html-webpack-plugin的插件
自动生成html文件，尤其能随着编译的变化而变化，不需要手动改变bundle.js
//安装插件
yarn add html-webpack-plugin --dev
2、配置webpack
配置webpack之前，首先要考虑怎么配置webpack，为了后面方便维护或者方便管理的，我们通常会把开发环境和生产环境分开管理，各自修改或者维护。然后我就参考这个思维，就在项目根目录下新建一个config的文件夹，然后建立三个文件，一个是通用的配置（webpack.common.js），一个是开发环境的配置（webpack.dev.js），一个是生产环境的配置（webpack.prod.js），如图下：
image
- 通用的配置
开发和生产环境的通用配置放到这个，比如说设置入口，出口打包
//webpack.common.js
const path=require('path'); //路径的api
const HtmlWebpackPlugin=require('html-webpack-plugin');//引用html-webpack-plugin
module.exports={
//入口的设置
entry:{
app:'./src/index.js', //入口的文件名
},
//http服务的设置
devServer:{ //利用上面的webpack-dev-server插件
port:1234 //端口号，默认是8080，8080这个端口号很容易被占用，前端应该不常出现。反正我喜欢设置1234
},
//管理资源
module:{
rules:[
{
//加载js
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/,
}
]
},
//出口的设置
output:{
filename:'[name].bundle.js',//命名文件
path:path.resolve(__dirname,'../dist')//生成的位置
}
}
- 开发环境的配置
//webpack.dev.js
const common=require('./webpack.common.js');//引用通用配置
const merge=require('webpack-merge');//引用webpack-merge插件
module.exports=merge(common,{
mode:'development', //开发的模式
})
目前的配置就简单点，后面需要的时候就再扩展
- 生产环境的配置
//webpack.prod.js
const merge=require('webpack-merge');
const common=require('./webpack.common.js');
module.exports=merge(common,{
mode:'production'
})
- 既然用react和es6，那就需要配置.babelrc，就在项目的根目录下新建
//.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
]
}
- 我们一般用命令行来启动开发环境的运行，或者打包的。这个还要配置的，就在package.json里增加
//package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "dev": "webpack-dev-server --config config/webpack.dev.js --open", //开发环境，根据config文件夹下的webpack.dev.js文件的配置，--open这个是自动开启浏览器
+ "build": "webpack --config config/webpack.prod.js"//生产环境，根据config文件夹下的webpack.prod.js文件的配置
},
webpack配置差不多到此为止了，如果还有问题的话，那就再回来改造～
开始react的表演
程序员通常喜欢用Hello World来开始的，那么我也从Hello React开始，看看webpack的配置对不对
- 首先在项目的根目录下新建public，放index.html
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>react demo</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
有没有发现，我还没引用bundle.js。然后这就需要在wbepack里配置
//webpack.common.js
devServer:{ //利用上面的webpack-dev-server插件
port:1234 //端口号，默认是8080，8080这个端口号很容易被占用，前端应该不常出现。反正我喜欢设置1234
},
//新增的代码块
+ plugins:[
+ new HtmlWebpackPlugin({
+ template:'public/index.html',//指定的html模板，这个会自动帮我引用下面output出口设置的文件名。
+ })
+ ],
- 在项目的根目录下新建src文件夹，然后再新建index.js文件
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello React.js</h1>,
document.getElementById('root'),
)
应该差不多了，那就试试yarn start(package.json中的start)
yarn start
然后浏览器就会自动开启，就能看到大大的“Hello React”。
yarn build
就能看到dist的文件夹，这个是打包后的文件夹，可以看看html的代码，会发现多了一个script的引用，是html-webpack-plugin的作用。
零配置的搭建就到此为止，后会有期～
