create-react-app开发常用配置教程


Posted in Javascript onJune 25, 2022

引言

注: 如未找到配置文件请使用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开发配置的资料请关注三水点靠木其它相关文章!


Tags in this post...

Javascript 相关文章推荐
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
Mac中安装nvm的教程分享
Dec 11 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
vue实现简单图片上传
Jun 30 Javascript
JavaScript 与 TypeScript之间的联系
Nov 27 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 #Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 #Javascript
JavaScript设计模式之原型模式详情
Jun 21 #Javascript
js前端设计模式优化50%表单校验代码示例
微前端qiankun改造日渐庞大的项目教程
Jun 21 #Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 #Javascript
js前端图片加载异常兜底方案
Jun 21 #Javascript
You might like
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
php zend 相对路径问题
2009/01/12 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
JavaScript基础知识之数据类型
2012/08/06 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
Python中单、双下划线的区别总结
2017/12/01 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
Python3中的json模块使用详解
2018/05/05 Python
python实现音乐下载的统计
2018/06/20 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
pandas数据处理之绘图的实现
2020/06/15 Python
python中setuptools的作用是什么
2020/06/19 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
园长自我鉴定
2013/10/06 职场文书
采购文员岗位职责
2013/11/20 职场文书
测绘工程个人的自我评价
2013/11/23 职场文书
宣传保护环境的公益广告词
2014/03/13 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
Python常遇到的错误和异常
2021/11/02 Python