• 【腾讯云Cloud Studio 实战训练营】深入解析Cloud Studio—React 快速构建点餐页面

    序言

    运气不会凭空而来，只有当你足够努力的时候，才会足够幸运。

    文章标记颜色说明：

    • 黄色：重要标题
    • 红色：用来标记结论
    • 绿色：用来标记论点
    • 蓝色：用来标记论点

    腾讯云CloudStudio是一款基于云端的集成开发环境（IDE），它可以让开发人员在任何地方、任何时间使用互联网访问和编写代码，而无需安装任何软件或工具。

    在本文中，将详细介绍CloudStudio的

    • CloudStudio功能特点
    • 编辑器功能特点
    • 其他功能介绍
    • CloudStudio从0到1项目实战
    • 总结&展望

    希望这篇文章能让你不仅有一定的收获，而且可以愉快的学习，如果有什么建议，都可以留言和我交流

     1 功能特点

    CloudStudio是一款基于云端的集成开发环境（IDE），它提供了许多先进的特点和功能，可以帮助我们更加高效、灵活地进行软件开发和测试。

    下面是CloudStudio的详细特点和功能：

    • 多语言支持
    • 无需安装
    • 云端存储
    • 智能编码
    • 版本控制
    • 丰富的插件生态
    • 高度可定制
    • 高度安全
    • 易于扩展
    • 轻量级

    官网地址：cloudstudio 

      

    1.1 多语言支持

    CloudStudio支持多种编程语言和框架。

    这意味着我们可以在同一个IDE中进行多种不同语言的开发工作，无需切换到不同的工具或环境。

    CloudStudio支持多种编程语言和框架，包括但不限于以下几种：

    1. Java
    2. Python
    3. Node.js
    4. Kotlin
    5. Scala
    6. React
    7. Vue.js
    8. Angular
    9. Ruby
    10. PHP

    除了上述编程语言和框架，CloudStudio还支持其他一些编程语言和框架。

    CloudStudio支持多种编程语言和框架，可以满足不同类型的开发人员的需求。

    如果需要使用其他编程语言或框架，也可以考虑使用CloudStudio的插件或自定义开发工具来满足对应的需求。

    1.2 无需安装

    CloudStudio是基于云端的IDE，无需在本地计算机上安装任何软件或工具。我们可以随时随地使用任何设备进行开发，无需担心软件安装和配置的问题。

    访问地址：cloudstudio

    1.3 云端存储

    CloudStudio将代码和项目存储在云端，我们可以在任意设备上访问和编辑代码，无需担心数据丢失或备份。

    此外，云端存储还可以帮助开发团队更好地协作和共享代码。

    在个人设置有CODING GitHub账号关联设置

    1.4 智能编码

    CloudStudio内置了智能编码功能，可以提供代码补全、自动修复、重构等功能，帮助我们更加高效地编写代码。

    此外，智能编码还可以提高代码的质量和可维护性。

    1.5 版本控制

    CloudStudio集成了Git版本控制系统，可以帮助我们轻松管理和维护自己的代码库。

    我们可以使用Git来跟踪代码的变化、协作开发、管理分支和合并请求等。

    1.6 丰富的插件生态

    CloudStudio支持第三方插件，可以帮助我们扩展和定制IDE的功能。

    这些插件可以提供额外的语言支持、调试器、自动化工具等，使得我们可以根据自己的需求进行个性化的设置。

    1.7 高度可定制

    CloudStudio提供了许多可定制的选项和设置，可以帮助我们根据自己的需求进行个性化设置，如修改主题、字体、缩进等。

    1.8 高度安全

    CloudStudio采用了多层安全措施，保障代码和数据的安全性。CloudStudio的数据存储和传输都采用了加密技术，确保数据不被黑客或恶意软件攻击。

    1.9 易于扩展

    CloudStudio具有可扩展性，可以根据需要添加新的工具、插件和库。开发人员可以使用CloudStudio的API和SDK来创建自己的插件和工具，以满足个性化需求。

    1.10轻量级

    CloudStudio是一个轻量级的IDE，可以快速启动和运行。这意味着开发人员可以更快地开始编写代码并运行项目，提高开发效率。

    总结 

    总之，CloudStudio是一款功能强大、安全稳定、易于扩展、轻量级的云端IDE，可以帮助我们更好地管理和维护他们的代码。

    如果需要高效、灵活开发，CloudStudio是一个值得尝试的工具。

    2 编辑器功能特点

    以下是CloudStudio的代码编辑器支持的一些主要功能:

    1. 语法高亮
    2. 代码自动补全
    3. 自动缩进
    4. 多光标编辑
    5. 代码折叠
    6. 查找和替换
    7. 代码导航
    8. 快速预览
    9. 代码格式化

    2.1 语法高亮

    代码编辑器能够根据所使用的编程语言，自动高亮显示不同的语法元素，以帮助我们更好地理解代码结构。

    2.2 代码自动补全

    当输入代码时，编辑器会智能地提供代码补全建议，以帮助我们更快地编写代码。

    这包括关键字、方法名、类名、变量名等。当按下Tab键时，编辑器会自动插入最佳建议。

    2.3 自动缩进

    代码编辑器会根据我们的编程语言和代码结构自动缩进，以更好地组织代码，并提高代码的可读性。

    当然，也支持手动调整缩进。

    2.4 多光标编辑

    代码编辑器支持多光标编辑，可以同时在多个位置插入或编辑文本。只需按住Ctrl键并单击文本即可创建多个光标。

    2.5 代码折叠

    代码编辑器支持代码折叠，可以将代码块折叠起来，以便更好地浏览和编辑代码。您只需单击代码行号旁边的折叠图标即可折叠代码块。

    2.6 查找和替换

    代码编辑器支持查找和替换功能，可以帮助您快速查找并替换代码中的文本。您可以使用快捷键Ctrl+F（查找）和Ctrl+H（替换）。

    2.7 代码导航

    代码编辑器支持代码导航功能，可以帮助您快速浏览代码文件，并跳转到您需要的代码行。您可以使用快捷键Ctrl+Shift+O来打开文件导航器。

    2.8 快速预览

    代码编辑器支持快速预览功能，可以让您在不离开编辑器的情况下查看代码文件的内容。

    只需单击文件名旁边的查看图标即可。

    2.9 代码格式化

    代码编辑器支持代码格式化功能，可以自动调整代码缩进、空格和换行等格式，以提高代码的可读性和一致性。

    可以使用快捷键Ctrl+Shift+F来格式化代码。

    2.10 总结 

    总之，CloudStudio的代码编辑器是一个功能强大、易于使用的工具，可以帮助您更好地编写、阅读和维护代码。

    如果您是一个需要高效、准确编码的开发人员，CloudStudio的代码编辑器是您的最佳选择。

    3 其他功能

    3.1 个人设置

    个人设置包括：

    • SSH公钥
    • GIT代理
    • 关联账号
    • 实名认证
    • 环境变量

    如下图示例，可根据自己的需要进行设置

    GIT代理 

     关联账号

    3.2 费用中心

    费用中心包括三个模块：

    • 账户概览
    • 购买账单
    • 资源用量

    这个模块主要是查看自己在平台的费用使用以及资源相关内容

    进入费用中心

    点击账号下面这个图标，就可以进入费用中心

    账户概览 

    资源用量

    4 项目实战

    这个项目会用云 IDE Cloud Studio 快速搭建，并开发还原一个移动端 React H5 的简版点餐系统页面。

    从 0 到 1 体验云 Cloud Studio 给项目带来的优势。

    4.1 注册账号

    打开官方链接，注册可以使用三种方式：

    • CODEING
    • 微信
    • GitHub

    我选择的是CODEING,需要先输入coding域名，

    输入域名之后，进入下界面 ，选择你的coding账号方式，进行扫码。

      

    如果你没有coding账号，需要先去注册一个，然后再进行登录。

    coding官网地址：coding

     4.2 登录成功

     扫码之后，正产情况就会成功登录，界面如下 ，这里可以看到提供了很多模板：

    • 常用模板
    • 框架模板
    • 云原生模板
    • 建站模板

    可以根据自己的需求，选择对应的模板。

    4.3 框架初始化

    1. 选择框架模板

    因为这个项目使用的是React框架，所以我们可以选择这个框架，创建工作空间 

    2 创建工作空间

    3 代码初始化

    空间启动成功中行，可以看到初始化左侧代码后，控制台会安装依赖及启动一个 React 简单的模板项目。

     

     4. 项目启动

    在项目当前目录下，执行项目启动,执行之后，可看到下图，则说明项目初始化成功

    1. yarn 
    2. yarn start

    4.4 安装依赖

    下面进行相关依赖安装

     1. 安装 antd-mobile

    安装命令
    yarn add antd-mobile@^5.32.0

     安装成功

     

    2. 安装 Less

     安装命令
    yarn add -D less@^3.12.2 less-loader@^7.0.1

     安装成功

     3  修改webpack 配置文件

    执行命令
    yarn eject

    输入 'y' 后，项目会自动进行解构操作。

    完成命令之后，项目根目录会出现一个config文件夹，里面是一些配置相关的脚本，也可以看到 package.json 中多了很多属性值，如 "dependencies".

    操作完成，会看到如下图：

     4.5 代码修改

    找到 config/webpack.config.js 文件，找到第60行左右，这块是设置 css 相关的代码。

    增加less配置：可以复制一下sass的代码，改为less

    1. // style files regexes
    2. const cssRegex = /\.css$/;
    3. const cssModuleRegex = /\.module\.css$/;
    4. const sassRegex = /\.(scss|sass)$/;
    5. const sassModuleRegex = /\.module\.(scss|sass)$/;
    6. // 新增加 Less 代码
    7. const lessRegex = /\.(less)$/;
    8. const lessModuleRegex = /\.module\.(less)$/;

     继续向下搜索sass，位置在 504 行左右，能够找到以下代码。

     和之前配置一样，仿照sass的配置，进行less的配置。

    1. // less
    2. {
    3.   test: lessRegex,  // 有改动
    4.   exclude: lessModuleRegex,  // 有改动
    5.   use: getStyleLoaders(
    6.     {
    7.       importLoaders: 3,
    8.       sourceMap: isEnvProduction
    9.         ? shouldUseSourceMap
    10.         : isEnvDevelopment,
    11.     },
    12.     'less-loader'  // 有改动
    13.   ),
    14.   sideEffects: true,
    15. },
    16. {
    17.   test: lessModuleRegex,  // 有改动
    18.   use: getStyleLoaders(
    19.     {
    20.       importLoaders: 3,
    21.       sourceMap: isEnvProduction
    22.         ? shouldUseSourceMap
    23.         : isEnvDevelopment,
    24.       modules: {
    25.         getLocalIdent: getCSSModuleLocalIdent,
    26.       },
    27.     },
    28.     'less-loader'  // 有改动
    29.   ),
    30. },
    webpack.config.js 完整代码

    复制下面代码可以直接替换webpack.config.js

    1. 'use strict';
    2.  
    3. const fs = require('fs');
    4. const path = require('path');
    5. const webpack = require('webpack');
    6. const resolve = require('resolve');
    7. const HtmlWebpackPlugin = require('html-webpack-plugin');
    8. const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
    9. const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
    10. const TerserPlugin = require('terser-webpack-plugin');
    11. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    12. const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
    13. const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
    14. const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
    15. const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
    16. const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
    17. const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
    18. const ESLintPlugin = require('eslint-webpack-plugin');
    19. const paths = require('./paths');
    20. const modules = require('./modules');
    21. const getClientEnvironment = require('./env');
    22. const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
    23. const ForkTsCheckerWebpackPlugin =
    24.   process.env.TSC_COMPILE_ON_ERROR === 'true'
    25.     ? require('react-dev-utils/ForkTsCheckerWarningWebpackPlugin')
    26.     : require('react-dev-utils/ForkTsCheckerWebpackPlugin');
    27. const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
    28.  
    29. const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
    30.  
    31. // Source maps are resource heavy and can cause out of memory issue for large source files.
    32. const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
    33.  
    34. const reactRefreshRuntimeEntry = require.resolve('react-refresh/runtime');
    35. const reactRefreshWebpackPluginRuntimeEntry = require.resolve(
    36.   '@pmmmwh/react-refresh-webpack-plugin'
    37. );
    38. const babelRuntimeEntry = require.resolve('babel-preset-react-app');
    39. const babelRuntimeEntryHelpers = require.resolve(
    40.   '@babel/runtime/helpers/esm/assertThisInitialized',
    41.   { paths: [babelRuntimeEntry] }
    42. );
    43. const babelRuntimeRegenerator = require.resolve('@babel/runtime/regenerator', {
    44.   paths: [babelRuntimeEntry],
    45. });
    46.  
    47. // Some apps do not need the benefits of saving a web request, so not inlining the chunk
    48. // makes for a smoother build process.
    49. const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
    50.  
    51. const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true';
    52. const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';
    53.  
    54. const imageInlineSizeLimit = parseInt(
    55.   process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
    56. );
    57.  
    58. // Check if TypeScript is setup
    59. const useTypeScript = fs.existsSync(paths.appTsConfig);
    60.  
    61. // Check if Tailwind config exists
    62. const useTailwind = fs.existsSync(
    63.   path.join(paths.appPath, 'tailwind.config.js')
    64. );
    65.  
    66. // Get the path to the uncompiled service worker (if it exists).
    67. const swSrc = paths.swSrc;
    68.  
    69. // style files regexes
    70. const cssRegex = /\.css$/;
    71. const cssModuleRegex = /\.module\.css$/;
    72. const sassRegex = /\.(scss|sass)$/;
    73. const sassModuleRegex = /\.module\.(scss|sass)$/;
    74.  
    75. const lessRegex = /\.less$/;
    76. const lessModuleRegex = /\.module\.less$/;
    77.  
    78. const hasJsxRuntime = (() => {
    79.   if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
    80.     return false;
    81.   }
    82.  
    83.   try {
    84.     require.resolve('react/jsx-runtime');
    85.     return true;
    86.   } catch (e) {
    87.     return false;
    88.   }
    89. })();
    90.  
    91. // This is the production and development configuration.
    92. // It is focused on developer experience, fast rebuilds, and a minimal bundle.
    93. module.exports = function (webpackEnv) {
    94.   const isEnvDevelopment = webpackEnv === 'development';
    95.   const isEnvProduction = webpackEnv === 'production';
    96.  
    97.   // Variable used for enabling profiling in Production
    98.   // passed into alias object. Uses a flag if passed into the build command
    99.   const isEnvProductionProfile =
    100.     isEnvProduction && process.argv.includes('--profile');
    101.  
    102.   // We will provide `paths.publicUrlOrPath` to our app
    103.   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
    104.   // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
    105.   // Get environment variables to inject into our app.
    106.   const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
    107.  
    108.   const shouldUseReactRefresh = env.raw.FAST_REFRESH;
    109.  
    110.   // common function to get style loaders
    111.   const getStyleLoaders = (cssOptions, preProcessor) => {
    112.     const loaders = [
    113.       isEnvDevelopment && require.resolve('style-loader'),
    114.       isEnvProduction && {
    115.         loader: MiniCssExtractPlugin.loader,
    116.         // css is located in `static/css`, use '../../' to locate index.html folder
    117.         // in production `paths.publicUrlOrPath` can be a relative path
    118.         options: paths.publicUrlOrPath.startsWith('.')
    119.           ? { publicPath: '../../' }
    120.           : {},
    121.       },
    122.       {
    123.         loader: require.resolve('css-loader'),
    124.         options: cssOptions,
    125.       },
    126.       {
    127.         // Options for PostCSS as we reference these options twice
    128.         // Adds vendor prefixing based on your specified browser support in
    129.         // package.json
    130.         loader: require.resolve('postcss-loader'),
    131.         options: {
    132.           postcssOptions: {
    133.             // Necessary for external CSS imports to work
    134.             // https://github.com/facebook/create-react-app/issues/2677
    135.             ident: 'postcss',
    136.             config: false,
    137.             plugins: !useTailwind
    138.               ? [
    139.                   'postcss-flexbugs-fixes',
    140.                   [
    141.                     'postcss-preset-env',
    142.                     {
    143.                       autoprefixer: {
    144.                         flexbox: 'no-2009',
    145.                       },
    146.                       stage: 3,
    147.                     },
    148.                   ],
    149.                   // Adds PostCSS Normalize as the reset css with default options,
    150.                   // so that it honors browserslist config in package.json
    151.                   // which in turn let's users customize the target behavior as per their needs.
    152.                   'postcss-normalize',
    153.                 ]
    154.               : [
    155.                   'tailwindcss',
    156.                   'postcss-flexbugs-fixes',
    157.                   [
    158.                     'postcss-preset-env',
    159.                     {
    160.                       autoprefixer: {
    161.                         flexbox: 'no-2009',
    162.                       },
    163.                       stage: 3,
    164.                     },
    165.                   ],
    166.                 ],
    167.           },
    168.           sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
    169.         },
    170.       },
    171.     ].filter(Boolean);
    172.     if (preProcessor) {
    173.       loaders.push(
    174.         {
    175.           loader: require.resolve('resolve-url-loader'),
    176.           options: {
    177.             sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
    178.             root: paths.appSrc,
    179.           },
    180.         },
    181.         {
    182.           loader: require.resolve(preProcessor),
    183.           options: {
    184.             sourceMap: true,
    185.           },
    186.         }
    187.       );
    188.     }
    189.     return loaders;
    190.   };
    191.  
    192.   return {
    193.     target: ['browserslist'],
    194.     // Webpack noise constrained to errors and warnings
    195.     stats: 'errors-warnings',
    196.     mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
    197.     // Stop compilation early in production
    198.     bail: isEnvProduction,
    199.     devtool: isEnvProduction
    200.       ? shouldUseSourceMap
    201.         ? 'source-map'
    202.         : false
    203.       : isEnvDevelopment && 'cheap-module-source-map',
    204.     // These are the "entry points" to our application.
    205.     // This means they will be the "root" imports that are included in JS bundle.
    206.     entry: paths.appIndexJs,
    207.     output: {
    208.       // The build folder.
    209.       path: paths.appBuild,
    210.       // Add /* filename */ comments to generated require()s in the output.
    211.       pathinfo: isEnvDevelopment,
    212.       // There will be one main bundle, and one file per asynchronous chunk.
    213.       // In development, it does not produce real files.
    214.       filename: isEnvProduction
    215.         ? 'static/js/[name].[contenthash:8].js'
    216.         : isEnvDevelopment && 'static/js/bundle.js',
    217.       // There are also additional JS chunk files if you use code splitting.
    218.       chunkFilename: isEnvProduction
    219.         ? 'static/js/[name].[contenthash:8].chunk.js'
    220.         : isEnvDevelopment && 'static/js/[name].chunk.js',
    221.       assetModuleFilename: 'static/media/[name].[hash][ext]',
    222.       // webpack uses `publicPath` to determine where the app is being served from.
    223.       // It requires a trailing slash, or the file assets will get an incorrect path.
    224.       // We inferred the "public path" (such as / or /my-project) from homepage.
    225.       publicPath: paths.publicUrlOrPath,
    226.       // Point sourcemap entries to original disk location (format as URL on Windows)
    227.       devtoolModuleFilenameTemplate: isEnvProduction
    228.         ? info =>
    229.             path
    230.               .relative(paths.appSrc, info.absoluteResourcePath)
    231.               .replace(/\\/g, '/')
    232.         : isEnvDevelopment &&
    233.           (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
    234.     },
    235.     cache: {
    236.       type: 'filesystem',
    237.       version: createEnvironmentHash(env.raw),
    238.       cacheDirectory: paths.appWebpackCache,
    239.       store: 'pack',
    240.       buildDependencies: {
    241.         defaultWebpack: ['webpack/lib/'],
    242.         config: [__filename],
    243.         tsconfig: [paths.appTsConfig, paths.appJsConfig].filter(f =>
    244.           fs.existsSync(f)
    245.         ),
    246.       },
    247.     },
    248.     infrastructureLogging: {
    249.       level: 'none',
    250.     },
    251.     optimization: {
    252.       minimize: isEnvProduction,
    253.       minimizer: [
    254.         // This is only used in production mode
    255.         new TerserPlugin({
    256.           terserOptions: {
    257.             parse: {
    258.               // We want terser to parse ecma 8 code. However, we don't want it
    259.               // to apply any minification steps that turns valid ecma 5 code
    260.               // into invalid ecma 5 code. This is why the 'compress' and 'output'
    261.               // sections only apply transformations that are ecma 5 safe
    262.               // https://github.com/facebook/create-react-app/pull/4234
    263.               ecma: 8,
    264.             },
    265.             compress: {
    266.               ecma: 5,
    267.               warnings: false,
    268.               // Disabled because of an issue with Uglify breaking seemingly valid code:
    269.               // https://github.com/facebook/create-react-app/issues/2376
    270.               // Pending further investigation:
    271.               // https://github.com/mishoo/UglifyJS2/issues/2011
    272.               comparisons: false,
    273.               // Disabled because of an issue with Terser breaking valid code:
    274.               // https://github.com/facebook/create-react-app/issues/5250
    275.               // Pending further investigation:
    276.               // https://github.com/terser-js/terser/issues/120
    277.               inline: 2,
    278.             },
    279.             mangle: {
    280.               safari10: true,
    281.             },
    282.             // Added for profiling in devtools
    283.             keep_classnames: isEnvProductionProfile,
    284.             keep_fnames: isEnvProductionProfile,
    285.             output: {
    286.               ecma: 5,
    287.               comments: false,
    288.               // Turned on because emoji and regex is not minified properly using default
    289.               // https://github.com/facebook/create-react-app/issues/2488
    290.               ascii_only: true,
    291.             },
    292.           },
    293.         }),
    294.         // This is only used in production mode
    295.         new CssMinimizerPlugin(),
    296.       ],
    297.     },
    298.     resolve: {
    299.       // This allows you to set a fallback for where webpack should look for modules.
    300.       // We placed these paths second because we want `node_modules` to "win"
    301.       // if there are any conflicts. This matches Node resolution mechanism.
    302.       // https://github.com/facebook/create-react-app/issues/253
    303.       modules: ['node_modules', paths.appNodeModules].concat(
    304.         modules.additionalModulePaths || []
    305.       ),
    306.       // These are the reasonable defaults supported by the Node ecosystem.
    307.       // We also include JSX as a common component filename extension to support
    308.       // some tools, although we do not recommend using it, see:
    309.       // https://github.com/facebook/create-react-app/issues/290
    310.       // `web` extension prefixes have been added for better support
    311.       // for React Native Web.
    312.       extensions: paths.moduleFileExtensions
    313.         .map(ext => `.${ext}`)
    314.         .filter(ext => useTypeScript || !ext.includes('ts')),
    315.       alias: {
    316.         // Support React Native Web
    317.         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
    318.         'react-native': 'react-native-web',
    319.         // Allows for better profiling with ReactDevTools
    320.         ...(isEnvProductionProfile && {
    321.           'react-dom$': 'react-dom/profiling',
    322.           'scheduler/tracing': 'scheduler/tracing-profiling',
    323.         }),
    324.         ...(modules.webpackAliases || {}),
    325.       },
    326.       plugins: [
    327.         // Prevents users from importing files from outside of src/ (or node_modules/).
    328.         // This often causes confusion because we only process files within src/ with babel.
    329.         // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
    330.         // please link the files into your node_modules/ and let module-resolution kick in.
    331.         // Make sure your source files are compiled, as they will not be processed in any way.
    332.         new ModuleScopePlugin(paths.appSrc, [
    333.           paths.appPackageJson,
    334.           reactRefreshRuntimeEntry,
    335.           reactRefreshWebpackPluginRuntimeEntry,
    336.           babelRuntimeEntry,
    337.           babelRuntimeEntryHelpers,
    338.           babelRuntimeRegenerator,
    339.         ]),
    340.       ],
    341.     },
    342.     module: {
    343.       strictExportPresence: true,
    344.       rules: [
    345.         // Handle node_modules packages that contain sourcemaps
    346.         shouldUseSourceMap && {
    347.           enforce: 'pre',
    348.           exclude: /@babel(?:\/|\\{1,2})runtime/,
    349.           test: /\.(js|mjs|jsx|ts|tsx|css)$/,
    350.           loader: require.resolve('source-map-loader'),
    351.         },
    352.         {
    353.           // "oneOf" will traverse all following loaders until one will
    354.           // match the requirements. When no loader matches it will fall
    355.           // back to the "file" loader at the end of the loader list.
    356.           oneOf: [
    357.             // TODO: Merge this config once `image/avif` is in the mime-db
    358.             // https://github.com/jshttp/mime-db
    359.             {
    360.               test: [/\.avif$/],
    361.               type: 'asset',
    362.               mimetype: 'image/avif',
    363.               parser: {
    364.                 dataUrlCondition: {
    365.                   maxSize: imageInlineSizeLimit,
    366.                 },
    367.               },
    368.             },
    369.             // "url" loader works like "file" loader except that it embeds assets
    370.             // smaller than specified limit in bytes as data URLs to avoid requests.
    371.             // A missing `test` is equivalent to a match.
    372.             {
    373.               test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
    374.               type: 'asset',
    375.               parser: {
    376.                 dataUrlCondition: {
    377.                   maxSize: imageInlineSizeLimit,
    378.                 },
    379.               },
    380.             },
    381.             {
    382.               test: /\.svg$/,
    383.               use: [
    384.                 {
    385.                   loader: require.resolve('@svgr/webpack'),
    386.                   options: {
    387.                     prettier: false,
    388.                     svgo: false,
    389.                     svgoConfig: {
    390.                       plugins: [{ removeViewBox: false }],
    391.                     },
    392.                     titleProp: true,
    393.                     ref: true,
    394.                   },
    395.                 },
    396.                 {
    397.                   loader: require.resolve('file-loader'),
    398.                   options: {
    399.                     name: 'static/media/[name].[hash].[ext]',
    400.                   },
    401.                 },
    402.               ],
    403.               issuer: {
    404.                 and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
    405.               },
    406.             },
    407.             // Process application JS with Babel.
    408.             // The preset includes JSX, Flow, TypeScript, and some ESnext features.
    409.             {
    410.               test: /\.(js|mjs|jsx|ts|tsx)$/,
    411.               include: paths.appSrc,
    412.               loader: require.resolve('babel-loader'),
    413.               options: {
    414.                 customize: require.resolve(
    415.                   'babel-preset-react-app/webpack-overrides'
    416.                 ),
    417.                 presets: [
    418.                   [
    419.                     require.resolve('babel-preset-react-app'),
    420.                     {
    421.                       runtime: hasJsxRuntime ? 'automatic' : 'classic',
    422.                     },
    423.                   ],
    424.                 ],
    425.                 
    426.                 plugins: [
    427.                   isEnvDevelopment &&
    428.                     shouldUseReactRefresh &&
    429.                     require.resolve('react-refresh/babel'),
    430.                 ].filter(Boolean),
    431.                 // This is a feature of `babel-loader` for webpack (not Babel itself).
    432.                 // It enables caching results in ./node_modules/.cache/babel-loader/
    433.                 // directory for faster rebuilds.
    434.                 cacheDirectory: true,
    435.                 // See #6846 for context on why cacheCompression is disabled
    436.                 cacheCompression: false,
    437.                 compact: isEnvProduction,
    438.               },
    439.             },
    440.             // Process any JS outside of the app with Babel.
    441.             // Unlike the application JS, we only compile the standard ES features.
    442.             {
    443.               test: /\.(js|mjs)$/,
    444.               exclude: /@babel(?:\/|\\{1,2})runtime/,
    445.               loader: require.resolve('babel-loader'),
    446.               options: {
    447.                 babelrc: false,
    448.                 configFile: false,
    449.                 compact: false,
    450.                 presets: [
    451.                   [
    452.                     require.resolve('babel-preset-react-app/dependencies'),
    453.                     { helpers: true },
    454.                   ],
    455.                 ],
    456.                 cacheDirectory: true,
    457.                 // See #6846 for context on why cacheCompression is disabled
    458.                 cacheCompression: false,
    459.                 
    460.                 // Babel sourcemaps are needed for debugging into node_modules
    461.                 // code.  Without the options below, debuggers like VSCode
    462.                 // show incorrect code and set breakpoints on the wrong lines.
    463.                 sourceMaps: shouldUseSourceMap,
    464.                 inputSourceMap: shouldUseSourceMap,
    465.               },
    466.             },
    467.             // "postcss" loader applies autoprefixer to our CSS.
    468.             // "css" loader resolves paths in CSS and adds assets as dependencies.
    469.             // "style" loader turns CSS into JS modules that inject