ReactCraco是一个可以轻松定制create-react-app配置的工具,它可以使开发人员更容易地在create-react-app启动器上添加自定义配置并删除它们。
一、安装与配置
要使用ReactCraco,需要先安装它:
npm install @craco/craco --save-dev
然后,通过使用“craco”而不是“react-scripts”脚本运行create-react-app启动器:
{
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
}
}
有许多预设配置,可以通过在根目录下创建craco.config.js文件并导出要使用的配置来使用它们。
例如,要在React项目中使用TailwindCSS,只需在这个配置文件中添加以下代码片段:
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss')
],
},
},
};
这将确保Create-react-app使用Tailwind CSS。
二、自定义配置规则
ReactCraco具有许多默认配置,但是在有时会遇到需要自定义配置的情况。
举个例子,如果想在服务器端渲染React应用程序时,在Webpack配置中添加一些特定于Node.js的选项,那么可以在craco.config.js配置文件中包括这些选项。
可以在此文件中的webpack配置对象中添加选项
module.exports = {
webpack: {
configure: (webpackConfig, { env, paths }) => {
if (env === 'production') {
webpackConfig.optimization.splitChunks = false;
}
return webpackConfig;
},
plugins: {
add: [
// Add plugins here
],
remove: [],
},
},
};
这个例子演示了如何在生产环境下禁用代码分离,这是一种优化生产打包的选项。也可以添加和删除其他插件。
三、环境变量
ReactCraco提供了指定环境变量的方法,这些变量可以在应用程序中使用。可以使用.env文件或在终端或CI / CD过程中设置变量。
例如,有两个环境变量API_HOST和API_PORT可以在React应用程序中使用。可以通过设置以下文件来设置它们:
API_HOST=example.com
API_PORT=8080
然后在应用程序代码中访问环境变量:
const apiUrl = `${process.env.API_HOST}:${process.env.API_PORT}`;
注意,React应用程序中的.env文件中既可以包含公共变量,也可以包含区分环境的变量等。
四、扩展脚本配置
在创建React应用程序时,可以使用create-react-app CLI实用程序使用命令行选项来修改某些配置。类似地,ReactCraco允许用户通过描述使用哪些拦截器来扩展内部系列脚本。
下面是一个使用路径别名的示例:
const path = require('path');
module.exports = {
webpack: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
jest: {
configure: (jestConfig, { env, paths }) => {
jestConfig.moduleNameMapper['^@(.*)$'] = '
/src$1';
return jestConfig;
},
},
};
上面的例子演示了如何用@来代替src。在webpack和Jest配置中使用路径别名。
总结
ReactCraco可以让开发人员在create-react-app启动器的基础上添加自定义配置,其配置方法简单,容易上手,对于定制化项目有很大的帮助。