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 tools 系列 scrollable(2)
Sep 06 Javascript
分享20款好玩的jQuery游戏
Apr 17 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
js实现无缝轮播图
Mar 09 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
删除重复数据的算法
2006/11/23 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
python 如何调用 dubbo 接口
2020/09/24 Python
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
澳大利亚相机之家:Camera House
2017/11/30 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
自我鉴定书
2014/03/24 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
践行三严三实心得体会
2014/10/13 职场文书
开除员工通知
2015/04/22 职场文书
经费申请报告范文
2015/05/18 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书