介绍一个比较完整的react基本需求的配置，主要包括css module、ant design主题修改
初始化react项目：
cnpm install -g create-react-app
create-react-app my-app
cd my-app/
yarn start
一般使用项目需要配置的插件
"axios": "^0.18.0",
"lib-flexible": "^0.3.2",
"mobx": "^5.8.0",
"mobx-react": "^5.4.3",
"px2rem-loader": "^0.1.9",
"react": "^16.7.0",
"react-dom": "^16.7.0"
react-router-dom
moment
echart
一、css module
npm run eject 暴露webpack配置
css模块化可以解决css命名冲突的问题，下面讲一下css moudle配置:
现在我使用的react版本是"react": "^16.8.1",
16.8之后的版本只需要在写css的时候改成module.css就行了，现在的版本只模块化module.css文件，其他的都忽略
如果是不想在css文件前面加module,则修改如下代码：
{
test: cssRegex,
exclude: [cssModuleRegex,/iconfont\.css$/,/node_modules/],
use: getStyleLoaders({
importLoaders: 1,
modules: true,
localIdentName:'[name]_[local]_[hash:base64:5]',
sourceMap: isEnvProduction ? shouldUseSourceMap:
isEnvDevelopment,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
{
test: cssRegex,
use: getStyleLoaders({
importLoaders: 1,
}),
},
模块化之后的样式都是局部样式，使用方法是
//js
import styles from './style.css'
className={styles.bg}
//css
正常css写法
如果把样式改成全局样式：
//js
className='bg'
//css
:global(.bg){
background: red;
}
去掉sourceMap
WX20200207-181353.png
二、ant design（ant mobile）主题颜色修改
需求：使用create-react-app 搭建的项目 ，使用ant design ui框架需要更改主题色 这样才能和设计稿的样式相匹配
实现步骤：
1、安装less
yarn add less less-loader
2、在webpack.config.dev.js和webpack.config.prod.js里面配置less环境,
放在css相关配置下的use里面
{
test: /\.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader', // translates CSS into CommonJS
}, {
loader: 'less-loader', // compiles Less to CSS
options: {
javascriptEnabled: true,
},
}],
// ...other rules
},
3、然后新建 theme.less，把@import "~antd/dist/antd.less";放入到 theme.less里面引入
在项目入口文件index.js里面引入theme.less文件
具体代码如下
@import "~antd/dist/antd.less";
@primary-color: #f00; // primary color for all components
@link-color: #1890ff; // link color
可以看到效果如下：
QQ截图20180905095622.png
三、手机端px转rem
首先要下载下面插件：
yarn add lib-flexible postcss-px2rem --save
在项目的index.js里面引入 import 'lib-flexible'
下载完成之后配置webpack.config.js
1、第一步引入插件：
WX20190114-203651.png
const px2rem = require('postcss-px2rem');
2、配置px和rem的转换
WX20190114-203819.png
px2rem({remUnit: 37.5})
3、配置好之后重启就行
注意：我这里设置的是37.5px=1rem 是因为我引入的ant design mobile 里面的ui样式如果使用75px=1rem会把字体变的很小，使用37.5就是正常大小
四、配置less，scss环境
使用less要先安装less依赖，创建的项目本身是不支持less语法的。
使用less：npm install less less-loader --save-dev
使用scss: yarn add sass-loader node-sass
然后修改config下面的webpack.config.dev.js和webpack.config.prod.js
修改webpack.config.dev.js和文件配置（prod和dev同样的设置）
// 在module中做了三处修改
// 第一处是找到 `test: /\.css$/` 将其改为 `test: /\.(css|less)$/`
// 第二处是增加 `less-loader`的配置
// 第三处是在exclude属性中增加 `/\.(css|less)$/`
// 具体修改如下
module: {
{
// test: /\.css$/
test: /\.(css|less|scss)$/,第一处 修改 如果只用less就只加less,只用scss就只加scss
use: [
require.resolve('style-loader'),
...
// 第二处 (添加)
{
loader: require.resolve('less-loader')
},
{
loader: require.resolve('sass-loader')
}
]
},
{
exclude: [
/\.(js|jsx|mjs)$/,
/\.html$/,
/\.json$/,
// 第三处（添加）
/\.(css|less|scss)$/,
]
}
}
五、react-router配置按需加载
第一种实现方式：基于create-react-app和Bundle组件
1、我们首先需要一个异步加载的包装组件Bundle。Bundle的主要功能就是接收一个组件异步加载的方法，并返回相应的react组件
import {Component} from 'react';
export default class Bundle extends Component {
constructor(props) {
super(props);
this.state = {
mod: null
};
}
componentWillMount() {
this.load(this.props)
}
componentWillReceiveProps(nextProps) {
if (nextProps.load !== this.props.load) {
this.load(nextProps)
}
}
load(props) {
this.setState({
mod: null
});
if(props.load !== null){
//注意这里，使用Promise对象; mod.default导出默认
props.load().then((mod) => {
this.setState({
mod: mod.default ? mod.default : mod
});
});
}
}
render() {
return this.state.mod ? this.props.children(this.state.mod) : null;
}
}
2、引入模块的时候需要用Bundle组件包一下,webpackChunkName相同就是打包的时候回打包到一起
import Bundle from './Bundle'
const AccountDetails = (props) => (
<Bundle load={()=> import(/* webpackChunkName: "InvestmentPost" */'../pages/AccountDetails/index')}>
{(AccountDetails) => <AccountDetails {...props} />}
</Bundle>
);
第二种实现方式：
1、安装依赖：yarn add react-loadable --save
2、在路由页面加入如下方法：
import Loadable from "react-loadable"; //引入
//页面加载组件(可以不要)
const Loading = ({ pastDelay, timedOut, error }) => {
if (pastDelay) {
return <div>正在加载中...</div>;
} else if (timedOut) {
return <div>Taking a long time...</div>;
} else if (error) {
return <div>Error!</div>;
}
return null;
};
const Home = Loadable({
loader: () => import("../pages/Home"),
loading: Loading,
timeout: 10000
});
网友评论