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 相关文章推荐
javascript数组组合成字符串的脚本
Jan 06 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
php常用hash加密函数
2014/11/22 PHP
php实现的mongodb操作类
2015/05/28 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
Convert Seconds To Hours
2007/06/16 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
python基础教程之获取本机ip数据包示例
2014/02/10 Python
详解使用Python处理文件目录的相关方法
2015/10/16 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
高性能装备提升营地:Kammok
2019/02/27 全球购物
光声世纪笔试题目
2012/08/25 面试题
爱我中华演讲稿
2014/05/20 职场文书
体育馆的标语
2014/06/24 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
国庆节活动总结
2014/08/26 职场文书
安全生产工作汇报
2014/10/28 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
2015大一新生军训感言
2015/08/01 职场文书
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android