react项目如何集成HTML页面,如何搭建一个react项目（包含路由权限）

如何搭建一个react项目(包含路由权限)

如何搭建一个react项目(包含路由、权限)

init项目

1.创建项目文件夹并进入

mkdir react-project

cd react-project

2.初始化npm

输入npm init ，按照提示填写项目基本信息：

webpack

1.安装webpack(webpack4.X)

npminstall--save-dev webpack webpack-cli -g

(--save-dev与--save的区别：

--save-dev表示只是在编译过程中所依赖的包，例如：webpack、sass-loader等 最后在package.json的devDependencies部分显示

--save 表示编译后在运行时还需要依赖的包，例如 react react-dom等 最后在package.json的dependencies部分显示

-g 表示全局安装)

2.新建webpack.config.js 文件

这样就完成了最简单的webpack配置文件。相应的我们需要在src目录下新建一个index.js 文件。

接下来在命令行输入 webpack --config ./webpack.config.js就可以输出dist文件夹。

为了方便起见，通常我们会在package.json里配置脚本命令。在scripts标签下，添加一句"build": "webpack --config ./webpack.config.js"。这样，我们就可以通过npm run build完成webpack打包。

3.配置开发应用服务器

正常情况下，我们需要以应用服务器打开我们的网页，webpack-dev-server提供了一个简单的web服务器，并且能够实时重新加载。首先需要安装webpack-dev-server：

npm install -D webpack-dev-server

接下来，我们需要修改配置文件，告诉开发服务器，在哪里寻找文件：

修改webpack.dev.config.js,增加webpack-dev-server的配置

devServer:{

contentBase:path.join(__dirname,'./dist')

}

这段配置告诉webpack-dev-server，在默认host和port下建立服务，并将contentBase目录下的目录，作为可访问文件。

接下来让我们的服务器跑起来，在package.json配置如下的命令脚本：

"scripts" : {

"start": "webpack-dev-server --mode development --open",

"build: "webpack --mode production --config ./webpack.config.js"

}

Babel & React

目前仍有浏览器不兼容ES6，同时react的jsx语法，也需要babel来将其转化为能兼容的js代码：

npm install react react-dom react-router-dom -S

npm install babel-core babel-loader babel-preset-env babel-preset-react -D

安装完之后，我们需要在webpack中配置使其生效。在webpack.config.js 的module中添加rules规则：

考虑到后期可能会有别的规则需求，例如antDesign的引入，我们将babel的配置提出来，在根目录下新建文件 .babelrc：

这样我们就完成babel的相关配置，并且安装了react相关依赖，可以书写jsx语法了。

模块热替换(Hot Module Replacement)

1.安装依赖

npm install [email protected] --save-dev

2. .babelrc 增加 react-hot-loader/babel

{

"presets":["es2015","react","stage-0"],

"plugins":["react-hot-loader/babel"]

}

3. webpack.dev.config.js入口增加react-hot-loader/patch

entry:[

'react-hot-loader/patch',

path.join(__dirname,'src/index.js')

]

4.根据需要，在src/index.js作相应修改，如：

文件路径优化

以前我们引用组件，或者页面时候，都要写相对路径，如：../services/fetch，有时候可能会很复杂，webpack提供了一个别名配置，就是我们无论在哪个路径下，引用都可以这样写：services/fetch

下面我们来配置下，修改webpack.dev.config.js，增加别名：

devtool优化

代码哪里写错了，浏览器报错只报在build.js第几行，这让我们分析错误无从下手。

我们增加webpack配置devtool：

devtool:'inline-source-map'；

错误信息就能详细展示啦

编译css

npm install css-loader style-loader --save-dev

webpack.dev.config.js rules增加

{

test:/\.css$/,  use:['style-loader','css-loader']

}

编译图片

npm install --save-dev url-loader file-loader

webpack.dev.config.js rules增加

{

test:/\.(png|jpg|gif)$/,

use:[{        loader:'url-loader',

options:{     limit:8192    }

}]

}

HtmlWebpackPlugin

这个插件，每次会自动把js插入到你的模板index.html里面去。

npm install html-webpack-plugin --save-dev

修改webpack.dev.config.js，增加plugin

var HtmlWebpackPlugin = require('html-webpack-plugin');

plugins:[

newHtmlWebpackPlugin({

filename:'index.html',

template:path.join(__dirname,'src/index.html')

})

]

加入 babel-plugin-transform-runtime 和 babel-polyfill

1.npm install --save-dev babel-plugin-transform-runtime

2.npm install --save-dev babel-polyfill

修改webpack两个配置文件：

集成PostCSS

他有很多很多的插件，比如Autoprefixer这个插件,可以自动给css属性加浏览器前缀。

npm install--save-dev postcss-loader

npm install--save-dev postcss-cssnext

模拟AJAX数据之Mock.js

如何搭建一个react项目(包含路由权限)相关教程