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 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
JS实现网页烟花动画效果
Mar 10 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
PHP循环获取GET和POST值的代码
2008/04/09 PHP
Discuz 模板引擎的封装类代码
2008/07/18 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
python模仿网页版微信发送消息功能
2018/02/24 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
python打开使用的方法
2019/09/30 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
基于PyTorch中view的用法说明
2021/03/03 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
销售行业个人求职自荐信
2013/09/25 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
mysql序号rownum行号实现方式
2022/12/24 MySQL