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 相关文章推荐
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 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
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
Python函数的周期性执行实现方法
2016/08/13 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
python检索特定内容的文本文件实例
2018/06/05 Python
Python列表(List)知识点总结
2019/02/18 Python
Python字符串的常见操作实例小结
2019/04/08 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
Python对列表的操作知识点详解
2019/08/20 Python
Python:slice与indices的用法
2019/11/25 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
2019消防宣传标语!
2019/07/10 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书