create-react-app开发常用配置教程
引言
设置代理
模块热替换(HMR)
css局部化
支持装饰器写法
打包后路径问题导致页面空白
配置简化路径
按需引用antd-mobile（antd同）
打包构建分析
生产环境去掉map文件
配置less
配置不同环境变量
引言注: 如未找到配置文件请使用npm run eject弹出配置文件
当前对应版本react 16.2
设置代理在开发中往往是跨域请求的，配置一下请求代理可以解决这个问题
// package.json 文件
"proxy": "http://xxx.xxx",
模块热替换(HMR)
默认情况下在每次修改内容的时候都会刷新页面，有时候我们并不想要这样，比如有一个bug需要重复点击或者重复操作多次才能实现，但是由于我们每次修改都会刷新页面，可能会导致这个bug很难被测试或者实现，这个配置在我看来非常有用，当然这不是必须的，但是可以适当的提高开发效率。在React 的入口文件 src/index.js中，添加一些配置代码。
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
// +++++ 加入+++++
if (module.hot) {
module.hot.accept();
}
css局部化
正常导入css情况下会污染到全局
修改 webpack-config-dev.js 及 webpack-config-prod.js 配置
options: {
modules: true,
localIdentName: '__[local]--[hash:base64:5]'
}
注意: 使用 css-module会导致 ant 样式失效...其次有其他css局部化解决方案 比如 styled-components可参考我另外一篇文章 骚里骚气的styled-components快速入门
支持装饰器写法比如redux或者mobx可以使用@写法
安装 transform-decorators-legacy
npm install --save-dev babel-plugin-transform-decorators-legacy
插件中使用legacy是因为Babel 5支持处理装饰器，但是它也许会跟最终的标准有区别，所以才使用legacy这个词。
// package.json
"babel": {
"presets": [
"react-app"
],
"plugins": [
// +++ 加入配置 +++
"transform-decorators-legacy",
// ...ant配置
]
}
请注意， plugins 的属性非常重要: transform-decorators-legacy 应该放在最前面。 babel 设置有问题？请先查看这个 issue 。
打包后路径问题导致页面空白// package.json 文件增加配置
...
"homepage": ".",
...
注: 如果直接打开index.html后文件正确加载但页面仍然空白，请检查你是否使用的是 BrowserRouter (同vue的history模式)需要后端配置支持，否则请使用HashRouter 即带 #
配置简化路径当页面嵌套过深时我们会发现在路径通常都要这么写
import xx from './../../../xxx/qqq'通过配置webpack可以写成import xx from '@/xxx/qqq'
// 修改 webpack.config.dev 与 webpack.config.prod 两个文件 加入相同配置
...
// +++ 找个开心的地方加入配置
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
// 修改
alias: {
'react-native': 'react-native-web',
// +++ 加入配置
'@': resolve('src')
}
优点: 如果按照相对路径的方法引用，每次要计算.. 并且文件一旦迁移 那么又要重新计算，如此配置文件迁移也不需要计算
缺点: 在部分编辑器可能会失去文件引用高亮(比如webstrom), 并且不能通过快捷键快速查找其引用.
注 : 这属于webpack的配置，当然在vue-cli中也适用(更新:目前vue-cli已经默认支持这种配置)
按需引用antd-mobile（antd同）安装 antd-mobile npm i antd-mobile -S
安装 babel-plugin-import npm i babel-plugin-import -D
// package.json 文件
"babel": {
"presets": [
"react-app"
],
// 加入配置
"plugins": [
// 如果使用了 定制颜色功能 将 "css" => true 同时需要配置 less
["import", { "libraryName": "antd-mobile", "style": "css" }]
]
}
打包构建分析
build之后发现包体积比较大，用 webpack-bundle-analyzer 分析各个js文件的打包
// webpack.config.prod.js
const BundleAnalyzerPlugin =
require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// ...code
// 找到 plugins 记得别加错地方 很多 new xxx()的才是
plugins: [
new xxx(),
new xxx(),
// +++++
new BundleAnalyzerPlugin(),
]
生产环境去掉map文件
有时候你会发现build时间过长，参见npm run build takes 1-2 hours to build 我们可以去除掉map文件构建
// webpack.config.prod.js
- devtool: shouldUseSourceMap ? 'source-map' : false
// 改为
devtool: false,
配置less
安装
yarn add less-loader less --dev
// webpack.config.dev.js
module: {
strictExportPresence: true,
//...
rules: [
// ...
{
test: /\.(css|less)$/, // 修改
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {},
},
// 增加
{
loader: require.resolve('less-loader') // compiles Less to CSS
}
],
},
]
// webpack.config.prod.js
{
test: /\.(css|less)$/, // 修改
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
},
use: [
// ...code
{
loader: require.resolve('less-loader') // 增加
}
],
},
extractTextPluginOptions
)
),
}
配置不同环境变量
由于create-react-app 忽略了 env.NODE_ENV 环境变量的设置，参考文档 但是有时候在一些项目中，我们可能需要根据不同的环境变量使用不同的配置，那么我们可以这么做:
如果需要自定义环境变量 必须以REACT_APP_开头
// 修改package.json
"scripts": {
"start": "cross-env REACT_APP_SECRET_API=development node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
// 这三个是我加的 可以根据你的业务需求来
"build:dev": "cross-env REACT_APP_SECRET_API=development node scripts/build.js",
"build:test": "cross-env REACT_APP_SECRET_API=test node scripts/build.js",
"build:pro": "cross-env REACT_APP_SECRET_API=production node scripts/build.js",
},
然后我们在执行 npm run build:dev 的时候就可以拿到 REACT_APP_SECRET_API的值为development前面加 cross-env是为了兼容不同平台 需要自行安装 npm install cross-env --save-dev
以上就是create-react-app开发常用配置教程的详细内容，更多关于create-react-app开发配置的资料请关注软件开发网其它相关文章！
