React脚手架config-overrides.js文件的配置方式
作者:Goat恶霸詹姆斯
这篇文章主要介绍了React脚手架config-overrides.js文件的配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
React脚手架config-overrides.js文件配置
主要讲讲在react脚手架在不使用eject命令的情况下,如何进行webpack的配置。
网上查询了好多,只有针对相关的配置,这次全面的看一看配置。
还是一样,我们需要插件的帮助:
npm install react-app-rewired customize-cra --save-dev
配置package.json:
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test --env=jsdom", "eject": "react-scripts eject" }
在根目录下创建文件config-overrides.js,这里主要是由插件customize-cra来实现,配置包含两部分,customizer和utilities
const { override, addTslintLoader,addExternalBabelPlugins,addBabelPlugins,addBabelPresets,babelInclude,babelExclude,removeInternalBabelPlugin,fixBabelImports,addDecoratorsLegacy,disableEsLint,useEslintRc,enableEslintTypescript,addWebpackAlias,addWebpackResolve,addWebpackPlugin,addWebpackExternals,addWebpackModuleRule,setWebpackTarget,setWebpackStats,addBundleVisualizer,addBundleVisualizer,adjustWorkbox,useBabelRc,adjustWorkbox,addLessLoader,addPostcssPlugins,disableChunk} = require("customize-cra"); const path = require("path"); module.exports = override( //customizers //addTslintLoader(loaderOptions),需要安装tslint-loader addTslintLoader(), //addExternalBabelPlugins(plugins)/addExternalBabelPlugin(plugin),create-reat-app有2种方式配置babel-loader,一种是默认配置,另外一种通过external loader配置,在这里可以使用addExternalBabelPlugin添加插件,同样你可以使用addBabelPlugin,作用是一样的。注意如果添加多个插件要使用拓展符。 ...addExternalBabelPlugins( "babel-plugin-transform-do-expressions", "@babel/plugin-proposal-object-rest-spread" ), //addBabelPlugin(plugin)/addBabelPlugins(plugins) ...addBabelPlugins( "polished", "emotion", "babel-plugin-transform-do-expressions" ), //addBabelPreset(preset)/addBabelPresets(...presets)添加babel preset配置,用法如下,与上述的addExternalBabelPlugins写法相同 ...addBabelPresets( [ "@babel/env", { targets: { browsers: ["> 1%", "last 2 versions"] }, modules: "commonjs" } ], "@babel/preset-flow", "@babel/preset-react" ), //babelInclude(exclude)重写babel-loader的exclude配置 babelInclude([ path.resolve("src"), // make sure you link your own source path.resolve("node_modules/native-base-shoutem-theme"), path.resolve("node_modules/react-navigation"), path.resolve("node_modules/react-native-easy-grid") ]), //babelExclude(exclude)重写babel-loader的exclude配置 babelExclude([path.resolve("src/excluded-folder")]), //removeInternalBabelPlugin(pluginName)从配置中移除构造函数名称与pluginname匹配的特定babel插件 removeInternalBabelPlugin("plugin-name"), //fixBabelImports(libraryName, options),添加 babel-plugin-import 插件,主要用于按需引入 fixBabelImports("lodash", { libraryDirectory: "", camel2DashComponentName: false }), fixBabelImports("react-feather", { libraryName: "react-feather", libraryDirectory: "dist/icons" }), //addDecoratorsLegacy()开启修饰符,先安装@babel/plugin-proposal-decorators插件 addDecoratorsLegacy(), //disableEsLint()您可能需要将它与addDecoratorsLegacy一起使用,以便让装饰器和导出一起解析。如果你想在EsLint中使用@babel/plugin-proposal-decorators,你可以启用useEslintRc,如下所述,在你的.eslintrc或package.json中eslintonfig下进行以下配置: //"parserOptions": { // "ecmaFeatures": { // "legacyDecorators": true // } // } disableEsLint(), //useEslintRc(configFile)configFile是一个可选参数,允许指定ESLint配置文件的确切路径。配置eslint的规范 useEslintRc(configFile), //enableEslintTypescript()更新Webpack eslint-loader来检测.js(x)和.ts(x)文件,并在控制台上显示检测错误/警告。 enableEslintTypescript(), //addWebpackAlias(alias)将提供的别名信息添加到webpack的别名部分。传递一个带有任意数量条目的对象文字,整个对象将被合并。 addWebpackAlias({ '@': path.resolve('./src') }), //addWebpackResolve(resolve)导入文件的时候可以不用添加文件的后缀名 addWebpackResolve({ extensions: ['.tsx', '.ts', '.js', '.jsx', '.json'], }), //addWebpackPlugin(plugin)添加webpack插件,会被合并到plugins数组中 addWebpackPlugin(new MiniCssExtractPlugin()), //addWebpackExternals(deps) 添加外部依赖,在尝试将库卸载到CDN时非常有用。addWebpackExternals也可以接受字符串、函数或正则表达式。有关更多信息,请参阅webpack文档。 addWebpackExternals({ //如直接以cdn引入的 react: "React", "react-dom": "ReactDom" echarts: "window.echarts", // highcharts:"window.highcharts" }), //addWebpackModuleRule(rule)将提供的规则添加到webpack配置的module.rules数组中 addWebpackModuleRule({test: /\.txt$/, use: 'raw-loader'}), //setWebpackTarget(target)为webpack设置目标配置变量。正如webpack文档中描述的那样,这可以是一个字符串或一个函数。如: webpack默认打包的target是浏览器模式。因为我做的是一个nwjs项目,所以需要生成node-webkit的包。 setWebpackTarget('node-webkit') //setWebpackStats(stats)设置webpack的stats属性。这个属性允许你在产品版本中定制Webpack的错误消息行为。正如webpack文档中描述的那样,这可以是一个字符串或一个对象。 setWebpackStats('error-only'), //或者如下对象形式 setWebpackStats({ warningsFilter: [ 'filter', /filter/, (warning) => true ] }), //addBundleVisualizer(options, behindFlag = false)将bundle可视化插件添加到webpack配置中。确保安装了webpack-bundle-analyzer。默认情况下,传递给插件的选项是: //{ //"analyzerMode": "static", //"reportFilename": "report.html" //} addBundleVisualizer({}, true), //setWebpackOptimizationSplitChunks(target)设置自定义优化。splitChunks配置到你的webpack配置。请谨慎使用此方法,因为webpack默认配置在大多数时候是有效的。默认情况下,create-react-app中的选项是: //{ //"chunks": "all", //"name": false //} addBundleVisualizer({}, true), //useBabelRc()启用你的.babelrc(或.babelrc.js) useBabelRc(), //adjustWorkbox(fn)调整Workbox配置。传递一个函数,该函数将与当前Workbox配置一起调用,其中您可以根据需要更改配置对象。请看下面的示例。 adjustWorkbox(wb => Object.assign(wb, { skipWaiting: true, exclude: (wb.exclude || []).concat("index.html") }), ); //addLessLoader(loaderOptions)添加less-loader, //npm i -D less less-loader addLessLoader({ strictMath: true, noIeCompat: true, modifyVars: { "@primary-color": "#1DA57A", // 例如, 你使用 Ant Design 改变主题色. }, cssLoaderOptions: {}, // .less 文件被使用在 css-loader 选项 cssModules: { localIdentName: "[path][name]__[local]--[hash:base64:5]", }, }), //如果你在CSS模块中使用TypeScript (npm init react-app my-app——TypeScript),你应该编辑react-app-env.d.ts。 //declare module "*.module.less" { //const classes: { [key: string]: string }; //export default classes; //} //addPostcssPlugins([plugins])添加postCss插件 addPostcssPlugins([require("postcss-px2rem")({ remUnit: 37.5 })]), //disableChunk()防止默认的静态分块,并强制整个构建到一个文件中。 disableChunk(), //removeModuleScopePlugin()这将删除CRA插件,防止从src目录外导入模块,如果你使用不同的目录,这很有用。一个常见的用例是如果您在monorepo设置中使用CRA,其中您的包在packages/而不是src/下。 removeModuleScopePlugin(), //watchAll()当应用时,CRA将监视项目的所有文件,包括node_modules。要使用它,只需应用它并使用yarn start运行开发服务器——watch-all watchAll(), //adjustStyleLoaders(callback)逐一找到所有样式加载器和回调 adjustStyleLoaders(({ use: [ , css, postcss, resolve, processor ] }) => { css.options.sourceMap = true; // css-loader postcss.options.sourceMap = true; // postcss-loader // when enable pre-processor, // resolve-url-loader will be enabled too if (resolve) { resolve.options.sourceMap = true; // resolve-url-loader } // pre-processor if (processor && processor.loader.includes('sass-loader')) { processor.options.sourceMap = true; // sass-loader } }) );
customizer整体配置就是这些。
utilities还有两个公共方法:
getBabelLoader(config, isOutsideOfApp)
从提供的配置返回babel加载器。
Create-react-app定义了两个Babel配置,一个用于src/目录下的js文件,另一个用于该目录外的任何js文件。
这个函数可以使用isOutsideOfApp参数。
tap(options)
通过在控制台中或单独的文件中打印配置,使用tap帮助您在某些点上识别配置。
Tap接受一个带有next属性的可选选项对象:
message
:配置前要打印的字符串消息dest
:写日志的目的文件
const { override, tap, addLessLoader } = require("customize-cra"); module.exports = override( // Print initial config in the console prepending a message tap({ message: "Pre - Customizers" }) /* Your customizers: eg. addLessLoader() */ addLessLoader() // Print final config in a separate file tap({ dest: 'customize-cra.log'}) )
补充:
另外一种抛出对象的写法 ,我们想要访问webpack里一些特定模块:
const {override, fixBabelImports, addLessLoader, overrideDevServer, watchAll} = require('customize-cra') const packageName = require('./package.json').name module.exports = { 'webpack': override( (config) => { config.output = config.output || {} config.output.library = `${packageName}-[name]` config.output.libraryTarget = 'umd' config.output.jsonpFunction = `webpackJsonp_${packageName}` return config }, fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: true, }), addLessLoader({ javascriptEnabled: true, modifyVars: { 'primary-color': '#1DA57A', 'link-color': '#1DA57A', 'border-radius-base': '2px', }, }) ), 'devServer': overrideDevServer( (config) => { config.headers = config.headers || {} config.headers['Access-Control-Allow-Origin'] = '*' return config }, watchAll() ) }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。