React 知识汲取篇 —— react-app-rewired && config-overrides.js配置

react-app-rewired

在学习React的时候 通过react脚手架create-react-app创建了项目，但是发现了一个问题 如果没有执行eject命令的话 是没有其他配置文件的 这个时候就需要 用到 customize-cra 和 react-app-rewired插件
然后在根目录下新建一个名称为config-overrides.js的文件。在里面去进行所有的配置

npm install react-app-rewired customize-cra --save-dev

react-app-rewired的作用就是在不eject的情况下,覆盖create-react-app的配置

然后修改package.json中启动的配置

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

然后在目录中创建一个config-overrides.js修改默认的一些配置

module.exports =function override(config, env){
        return config;
};

按需加载 babel-plugin-import

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件
官网
https://github.com/ant-design/babel-plugin-import
安装

npm install babel-plugin-import --save-dev

//引入
const { injectBabelPlugin } =require('react-app-rewired');
//使用
module.exports =function override(config, env){
        config= injectBabelPlugin(['import', 
        { libraryName:'antd', style:true}],config);
        return config;
  };

然后在组件中就可以直接进行引用

import { Button } from 'antd';

安装less

安装所需less依赖

npm install less-loader less --save-dev

安装react-app-rewire-less

npm install --save-dev react-app-rewire-less

config-overrides.js 修改配置

const rewireLess = require('react-app-rewire-less');

config = rewireLess.withLoaderOptions({
	modifyVars: { "@primary-color": "#1DA57A" },
	javascriptEnabled: true
})(config, env);

这里也可以自定义支持自己的主题
可以参考一个大佬的文章
antd在线换肤定制功能

config = rewireLess.withLoaderOptions({
        modifyVars: getLessVars(path.join(__dirname, './src/styles/vars.less')),
        javascriptEnabled: true
    })(config, env);

配置路径名别名

const { override, addWebpackAlias} = require('customize-cra');
const path = require('path')

 module.exports = override(
   addWebpackAlias({
     assets: path.resolve(__dirname, './src/assets'),
     pages: path.resolve(__dirname, './src/pages')
   })
);

path.resolve和path.join的区别

一、path.join()方法

path.join()方法是将多个参数字符串合并成一个路径字符串

console.log(path.join(__dirname,‘a’,‘b’));
假如当前文件的路径是E:/node/1,那么拼接出来就是E:/node/1/a/b。

console.log(path.join(__dirname,’/a’,’/b’,’…’));
路径开头的/不会影响拼接，…代表上一级文件，拼接出来的结果是：E:/node/1/a
　　console.log(path.join(__dirname,‘a’,{},‘b’));
而且path.join()还会帮我们做路径字符串的校验，当字符串不合法时，会抛出错误：Path must be a string.
二、path.resolve()方法 　　path.resolve()方法是以程序为根目录，作为起点，根据参数解析出一个绝对路径
　　以应用程序为根目录 　　普通字符串代表子目录 　　/代表绝对路径根目录
　　 　　console.log(path.resolve()); 得到应用程序启动文件的目录（得到当前执行文件绝对路径） E:\zf\webpack\1\src 　　console.log(path.resolve(‘a’,’/c’)); E:/c
,因为/斜杠代表根目录，所以得到的就是E:/c 　　所以我们一般拼接的时候需要小心点使用/斜杠
　　console.log(path.resolve(__dirname,‘img/so’));
E:\zf\webpack\1\src\img\so 这个就是将文件路径拼接，并不管这个路径是否真实存在。
　　console.log(path.resolve(‘wwwroot’, ‘static_files/png/’,
‘…/gif/image.gif’))
E:\zf\webpack\1\src\wwwroot\static_files\gif\image.gif
　　这个是用当前应用程序启动文件绝对路径与后面的所有字符串拼接，因为最开始的字符串不是以/开头的。 　　…也是代表上一级目录。

首先需要先引入

const path = require('path');

-------------------------------------------------------案例-------------------------------------------------------------------
转载于https://blog.csdn.net/qq_33745501/article/details/80270708
path.join()

const path = require('path');
let myPath = path.join(__dirname,'/img/so');
let myPath2 = path.join(__dirname,'./img/so');
let myPath3=path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');
 
 
console.log(__dirname);           
console.log(myPath);    
console.log(myPath2);   
console.log(myPath3);  

path.resolve()

let myPath = path.resolve(__dirname,'/img/so');
let myPath2 = path.resolve(__dirname,'./img/so');
let myPath3=path.resolve('/foo/bar', './baz');
let myPath4=path.resolve('/foo/bar', '/tmp/file/');
 
console.log(__dirname);           
console.log(myPath);    
console.log(myPath2);   
console.log(myPath3);  
console.log(myPath4);  

其中__dirname就是当前文件的路径

整体的安装配置

yarn add @babel/plugin-proposal-decorators    //修饰器
yarn add codebandits/react-app-rewire-css-modules sass-loader node-sass    //css、sass模块化
yarn add babel-plugin-import   //antd按需加载
yarn add react-app-rewire-less-modules  //less模块化

const { injectBabelPlugin } = require('react-app-rewired');
const rewireCssModules = require('react-app-rewire-css-modules');
const rewireLess = require('react-app-rewire-less-modules')
const path = require('path')

function resolve (dir) {
    return path.join(__dirname, '.', dir)
}


module.exports = function override(config, env) {
    // do stuff with the webpack config...

    //启用ES7的修改器语法（babel 7）
    config = injectBabelPlugin(['@babel/plugin-proposal-decorators', { "legacy": true }], config)   //{ "legacy": true }一定不能掉，否则报错

    //css模块化
    config = rewireCssModules(config, env);

    //配置别名
    config.resolve.alias = {
        '@': resolve('src')
    }

    //antd按需加载
    config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }], config,);

	//less模块化
	config = rewireLess.withLoaderOptions({
	   javascriptEnabled: true,
	   modifyVars: {'@primary-color': '#1DA57A'},
	})(config, env)


    return config;
};