react 中 yarn的配置文件 react如何打包后配置文件

需求：

将打包后的文件放到 myApp.org 文件夹 (非 build文件夹) 中，并且此文件夹放在该仓库的外面，即相对于根目录…/

方法1：更改 .env 配置(仅支持个别版本)

配置 package.json 命令

{
  "homepage": ".", //新增此项，打包后的静态文件引入路径改为相对路径'./'
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
  }
}

新建 .env 文件，并添加以下配置

BUILD_PATH = "../myApp.org"

方法2：借助 react-app-rewired 更改配置文件

安装依赖

yarn add react-app-rewired -D

配置 package.json 命令

{
+ "homepage": ".", //打包后的文件引入路径为相对路径'./'
  "scripts": {
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
  }
}

在根目录下配置 config-overrides.js 文件 (类似 vue.config.js)

const path = require('path')
const paths = require('react-scripts/config/paths')
paths.appBuild = path.join(path.dirname(paths.appBuild),'../myApp.org')

方法3：使用 eject 暴露配置文件，更改配置文件

配置 package.json 命令

{
+ "homepage": ".", //打包后的静态文件引入路径改为相对路径'./'
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject" //确保有此项配置，没有的话添加即可
  }
}

create-react-app框架本身将webpack、babel的相关配置封装在了react-scripts中，所以需要把配置文件暴露出来。

使用 eject 暴露配置文件,注意这个操作 不可逆

npm run eject  或  yarn eject

此时如果仓库没有添加 git 便会报错，依次执行如下命令添加 git

git init
git add .
git commit -m 'save before eject'

添加 git 之后重新执行 yarn eject ，这时会新增一个文件夹，如下图：

找到 config/paths.js 文件修改 buildPath

const buildPath = "../myApp.org"

以上三种方法总结

不难看出方法1最简单，但是方法1有局限性，不支持所有版本，推荐方法2，不推荐方法3，至于为什么我们不建议执行 eject？

1. 执行 eject 产生了什么变化？
   create-react-app 框架本身将 webpack、babel 的相关配置封装在了 react-scripts 中， 执行 yarn eject 后，会将 webpack、babel 等配置暴露在 config 目录下，同时 scripts 目录下会有新的命令文件更新，package.json 文件中 scripts 命令同步更新。
2. 执行 eject 带来了什么问题？
   首先，执行 eject 是不可逆的，复杂的 webpack 等配置由框架本身转交给用户自己进行维护了。
   其次，在版本迭代时，如果更新了 react、react-scripts、eslint、tsconfig 等依赖，有可能会引起版本依赖的问题，即使我们按错误信息修复了之后，项目还是无法运行。

补充

对于方法2中的config-overrides.js，根据自己的需求进行其他详细配置
安装依赖

yarn add customize-cra -D

1. antd的按需加载

安装依赖:

yarn add antd -D

配置

cosnt { override, fixBabelImports } = require('customize-cra');

module.exports = override(
	fixBabelImports(
  	"import",
    {
			"libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css"
    }
  )
)

2. 配置css预处理器 - less

为啥在这里只强调了less呢，因为create-react-app中内置了sass/scss的预处理器，只需要使用时安装相关的依赖就可以了（运行时，根据提示缺失的包进行安装即可）。

yarn add sass -D

接下来我们来less的是如何支持的

安装依赖：

yarn add less less-loader@7.3.0 -D

注意这里less-loader的版本 less-loader@7.3.0，如果是最新的版本和上面的react-app-rewired和customize-cra版本配合配置时有问题，所以使用了低版本的。

less-loader的最新版本其实是为了配合 webpack@5.0使用的。

配置

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

module.exports = override(
	addLessLoader({
		// 这里可以添加less的其他配置
		lessOptions: {
   		// 根据自己需要配置即可~
    }
	})
);

3. 设置alias、externals；

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

module.exports = override(
  // alias
	addWebpackAlias({
    // 加载模块的时候，可以使用“@”符号来进行简写啦~
    '@': path.resolve(__dirname, './src/')
  }),
  // externals
  addWebpackExternals({
    // 注意对应的在public/index.html引入jquery的远程文件地址
    "jQuery": "jQuery"
  })
)

4. 生产环境打包-去除console.log、debugger；

安装依赖

yarn add uglifyjs-webpack-plugin -D

配置

const { override, addWebpackPlugin } = require('customize-cra');
const  UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = override(
	// 注意是production环境启动该plugin
	process.env.NODE_ENV === 'production' && addWebpackPlugin(
  	new UglifyJsPlugin({
  		// 开启打包缓存
  		cache: true,
  		// 开启多线程打包
  		parallel: true,
  		uglifyOptions: {
  			// 删除警告
  			warnings: false,
  			// 压缩
  			compress: {
  				// 移除console
  				drop_console: true,
  				// 移除debugger
  				drop_debugger: true
  			}
  		}
  	})
  )
)

5. 打包结果优化分析；

安装依赖

yarn add webpack-bundle-analyzer cross-env -D

cross-env 用于配置环境变量

配置

// package.json文件
"scripts": {
	"build:analyzer": "cross-env ANALYZER=true react-app-rewired build"
}

// config-overrides.js
const { override, addWebpackPlugin } = require('customize-cra');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = override(
  // 判断环境变量ANALYZER参数的值
	process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin())
)

6. 打包增加进度条提示；

安装依赖

yarn add progress-bar-webpack-plugin -D

const { override, addWebpackPlugin } = require('customize-cra');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');

module.exports = override(
	addWebpackPlugin(new ProgressBarPlugin())
)

以上就是我们实现几个需求的配置。我们来看看完整的config-overrides.js文件。

// config-overrides.js
cosnt { override, fixBabelImports, addWebpackPlugin, addLessLoader, addWebpackAlias, addWebpackExternals } = require('customize-cra');
const path = require('path');
const  UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const paths = require('react-scripts/config/paths')
paths.appBuild = path.join(path.dirname(paths.appBuild),'../myApp.org')

module.exports = override(
  fixBabelImports(
  	"import",
    {
	  "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css"
    }
  ),
  addLessLoader({
	// 这里可以添加less的其他配置
	lessOptions: {
   	  // 根据自己需要配置即可~
    }
  }),
  // alias
  addWebpackAlias({
    // 加载模块的时候，可以使用“@”符号来进行简写啦~
    '@': path.resolve(__dirname, './src/')
  }),
  // externals
  addWebpackExternals({
    // 注意对应的在public/index.html引入jquery的远程文件地址
    "jQuery": "jQuery"
  }),
  // 注意是production环境启动该plugin
  process.env.NODE_ENV === 'production' && addWebpackPlugin(
	new UglifyJsPlugin({
		cache: true, // 开启打包缓存
	  	parallel: true, // 开启多线程打包
	  	uglifyOptions: {  	  
	  	  warnings: false, // 删除警告
	  	  // 压缩
	  	  compress: {	  		
	  		drop_console: true, // 移除console
	  		drop_debugger: true // 移除debugger
	  	  }
		}
	})
  ),
  // 判断环境变量ANALYZER参数的值
  process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin()),
  addWebpackPlugin(new ProgressBarPlugin())
)