React 配置rem

最新推荐文章于 2024-07-27 10:48:03 发布

weixin_41779718

最新推荐文章于 2024-07-27 10:48:03 发布

阅读量2.3k

点赞数 1

分类专栏： React

本文链接：https://blog.csdn.net/weixin_41779718/article/details/106800598

版权

React 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

react-app-rewired 扩展webpack的方法

 npm install react-app-rewired --save-dev
 // 或者
 yarn add react-app-rewired

/* 修改package.json */

 "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
-   "eject": "react-scripts eject"
}

文档https://github.com/timarney/react-app-rewired/blob/HEAD/README_zh.md

安装customize-cra

npm install customize-cra --save-dev

react项目中我们最常用的组件库antd，我们需要配置按需加载。

使用babel-plugin-import，它是一个用于按需加载组件代码和样式的 babel 插件。

npm install babel-plugin-import --save-dev
或者
yarn add babel-plugin-import

支持装饰器

const { override, addDecoratorsLegacy } = require("customize-cra");
module.exports = override(
    addDecoratorsLegacy()
);

配置webpack

/* config-overrides.js */
 const { override, fixBabelImports, addDecoratorsLegacy} = require('customize-cra'); 
 module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd',
     libraryDirectory: 'es',
     style: 'css',
   }),
   addDecoratorsLegacy()
 );

在组件中就可以按需引入组件库中所需要的组件了。

安装 postcss-pxtorem

npm install postcss-pxtorem --save

config-overrides.js,添加代码：

/**
 * [description]
 * 使用过create-react-app（以下简称cra）的朋友都知道，这是react官方的一款脚手架工具，
 * 使用过内部集成了使用react-app-rewired,使用此插件可以暴露出webpack
 * 但是！react-app-rewired2.x以后，不再支持injectBabelPlugin的方式，需要安装customize-cra。
 * npm install customize-cra --save-dev 或者  yarn add customize-cra --dev
 * 所以新建config-overrides.js可以读取到该文件
 */
const { override, fixBabelImports,addPostcssPlugins } = require('customize-cra');
 
/**
 * [关闭打包后的sourcemap description]
 * [打包后我们会发现静态文件夹中会有很多的css和js的map文件，关闭sourcemap]
 */
// process.env.GENERATE_SOURCEMAP = "false";
 
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    style: 'css',
  }),
  addPostcssPlugins([require('postcss-pxtorem')({
                               rootValue: 16,
                               propList: ['*']
                               // propList: ['*', '!border*', '!font-size*', '!letter-spacing'],
                               // propWhiteList: []
                            }),])
 
    /**
     * [安装less]
     * npm i less
     * npm i -D less-loader
     */
    // addLessLoader({
    //   javascriptEnabled: true,
    //   modifyVars: { '@primary-color': '#1DA57A' },
    // }),
 
    /**
     * [remUnit description]
     * npm install lib-flexible --save
     * flexible会为页面根据屏幕自动添加<meta name='viewport' >标签，
     * 动态控制initial-scale，maximum-scale，minimum-scale等属性的值。
     * 安装完成之后再入口index.js页面 import lib-flexible
     * 注意事项（important）: 由于flexible会动态给页面header中添加<meta name='viewport' >标签，
     * 所以务必请把目录 public/index.html 中的这个标签删除！！！
     */
 
     /**
      * [postcss-px2rem]
      * npm install postcss-px2rem --save
      * postcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，
      * 根据<html>标签的font-size值来计算出结果，1rem=html标签的font-size值。
      */
 
    // addPostcssPlugins([
    //   require("postcss-px2rem")({ remUnit: 37.5 })
    // ])
 
    /**
     * [description]
     * 温馨提示： remUnit这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。
     * 假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
     * 那为什么你在这里写成了37.5呢？？？那我们后面专门来讲！
     * 之所以设为37.5，是为了引用像mint-ui这样的第三方UI框架，因为第三方框架没有兼容px2rem ，
     * 将remUnit的值设置为设计图宽度（这里为750px）75的一半，即可以1:1还原mint-ui的组件，否则会样式会有变化，例如按钮会变小。
     * 既然设置成了37.5 那么我们必须在写样式时，也将值改为设计图的一半。
     */
 );

新建rem.js文件

const baseSize = 32
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

在src目录下的index.js引入rem.js

前端本地proxy的配置

在src目录下新建文件setupProxy.js（注意文件名一定要是这个名字，不要问什么，cra现在废弃了proxy对象配置的方式，将其作为单独模块。解析就是按 src/setupProxy.js这个路径）

安装http代理相关包http-proxy-middleware

npm install http-proxy-middleware --save-dev
或者
yarn add http-proxy-middleware -D

配置如下

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy('/api', {
      target: 'http://xx.xx.xx.xx:8000/',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    })
  )
}