node环境
首先要确保你的node和npm版本分别 >= 8.10 和 >= 5.6
打开命令行并输入：
node -v和
npm -v查看版本号，我的环境如下：
$ node -v
v8.16.2
$ npm -v
6.4.1
如不满足，则前往node官网进行新版本安装： nodejs.cn/download/
- 值得注意的是 node版本的更新可能会对原有旧项目产生影响，如你的旧项目如果用了sass，可能需要重装node-sass等
create-react-app
环境ok之后，我们正式开始：
$ npx create-react-app react-cli
- create-react-app可能会安装失败，最好借助科学上网工具，我有一次下午安装失败了十几次。
安装成功提醒如下：
We suggest that you begin by typing:
cd react-cli
yarn start
Happy hacking!
接下来，执行以下命令：
$ cd react-cli
$ npm start
此时，浏览器会弹出页面 http://localhost:3000/ 如未弹出，直接打开即可
- 如项目仅做个人研究，至此已经可以使用，不必阅读下方内容。
配置router
yarn add react-router react-router-dom
App.js代码修改：
//头部
- import React from 'react';
+ import React, { Component, Fragment } from 'react';
+ import { BrowserRouter, Route } from 'react-router-dom';
//路由展示组件
+ import View from './views/view'
//固定展示组件，多为导航栏
+ import LeftNav from './views/leftNav'
//下方return内容替换为：
<Fragment>
<BrowserRouter>
<div className='App'>
<LeftNav></LeftNav>
<Route path='/view' exact component={View}></Route>
</div>
</BrowserRouter>
</Fragment>
同时，在src下新建views文件夹,并生成以下文件
├── src
│ ├── views //view视图组件目录
│ └── view
│ └── index.js
│ ├── leftNav
│ └── index.js
leftNav/index.js:
import React from 'react';
class LeftNav extends React.Component {
constructor(props) {
super(props)
this.state = {}
}
render() {
return (
<div >
固定展示组件
</div>
)
}
}
export default LeftNav
view/index.js
import React from 'react';
function View() {
return (
<div>
<div className='box'>
View
</div>
</div>
);
}
export default View
此时可以看到，页面出现了“固定展示内容”几个字，当跳转到http://localhost:3000/view时，可以看到下方出现了“view”，则配置成功。
修改webpack相关配置
- create-react-app中的webpack配置是内置的，可以在node_modules/react-scripts/config/webpack.config.js中看到，可以通过
yarn run eject反编译到项目目录中，但此过程不可逆。
本框架是采用了另一种方式覆盖其webpack配置（此方式较前者简单便捷），即借助react-app-rewired（react官方修改create-react-app中webpack配置的工具）和customize-cra（里面有一些封装好的配置可直接使用）。
首先,安装react-app-rewired 和 customize-cra（yarn add === npm install --save）：
$ yarn add react-app-rewired customize-cra
然后修改package.json如下：
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
然后在根目录下创建config-overrides.js文件，默认配置为：
/**
* @file webpack 自定义配置
* @author xlj1@meitu.com
* @remark 不使用 package.json 的 "eject" 命令导出配置，使用 "react-app-rewired" 配置，配合 "customize-cra" 来简化配置
*/
const {
override,
} = require('customize-cra');
module.exports = {
webpack: override(
)
}
此时，可以通过查询customize-cra进行webpack自定义配置。
Ant Design（此处属于简洁复制antd官网内容，可直接前往其官网查看详细内容）
//antd组件库
$ yarn add antd
//按需加载
$ yarn add babel-plugin-import
// less
$ yarn add less less-loader
config-overrides.js修改为:
/**
* @file webpack 自定义配置
* @author xlj1@meitu.com
* @desc 不使用 package.json 的 "eject" 命令导出配置，使用 "react-app-rewired" 配置，配合 "customize-cra" 来简化配置
*/
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
//自定义主题颜色
modifyVars: { '@primary-color': '#E92076' },
}),
);
/views/leftNav/index.js:
import React from 'react';
+ import { Button } from 'antd'
class LeftNav extends React.Component {
constructor(props) {
super(props)
this.state = {}
}
render() {
return (
<div >
固定展示组件
+ <Button type='primary'>antd主按钮</Button>
</div>
)
}
}
export default LeftNav
重启项目,此时可以看到页面多了一个粉红色的按钮，则配置成功。
文中脚手架代码地址
此文章参考了以下链接内容：
