feat: 修改支持 css modules 合 react-dev-utils 升级

.eslintignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+public/
+lib/
+scripts/

package.json

@@ -6,6 +6,7 @@
   "bin": {
     "lark-cli-service": "./src/index.js"
   },
+  "types": "./src/lib/react-app.d.ts",
   "scripts": {
     "lint": "yarn lint:code && yarn lint:format",
     "lint:code": "eslint src --fix",
@@ -53,12 +54,14 @@
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
+    "bfj": "^7.0.2",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "chalk": "^4.1.2",
     "check-dependencies": "^1.1.0",
     "css-loader": "^6.5.1",
     "css-minimizer-webpack-plugin": "^3.3.0",
     "deepmerge": "4.2.2",
+    "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
     "html-webpack-plugin": "^5.5.0",
     "less": "^4.1.2",
@@ -71,7 +74,7 @@
     "postcss-normalize": "^10.0.1",
     "postcss-preset-env": "^7.0.2",
     "postcss-safe-parser": "^6.0.0",
-    "react-dev-utils": "11.0.4",
+    "react-dev-utils": "^12.0.0",
     "resolve-url-loader": "^4.0.0",
     "sass": "^1.45.0",
     "sass-loader": "^12.4.0",

src/.babel.config.js

@@ -7,8 +7,8 @@ const path = require('path')
 
 module.exports = (api) => {
   const projectBabelPath =
-    getProjectFilePath('.babel.config.js') ||
-    getProjectFilePath('babel.config.js')
+    getProjectFilePath('babel.config.js') ||
+    getProjectFilePath('.babel.config.js')
 
   let customBabelConfig = {}
   if (fs.existsSync(projectBabelPath)) {
@@ -52,5 +52,7 @@ module.exports = (api) => {
     ]
   }
 
-  return merge(config, customBabelConfig)
+  const mergedConfig = merge(config, customBabelConfig)
+
+  return mergedConfig
 }

src/commands/build.js

@@ -15,13 +15,14 @@ process.on('unhandledRejection', (err) => {
 const webpack = require('webpack')
 const fs = require('fs-extra')
 const chalk = require('chalk')
+const bfj = require('bfj')
 const FileSizeReporter = require('react-dev-utils/FileSizeReporter')
 const printBuildError = require('react-dev-utils/printBuildError')
 const { checkBrowsers } = require('react-dev-utils/browsersHelper')
+const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages')
 
 const configFactory = require('../webpack/webpack.config.build')
 const { appPath, appBuild, appPublic, appHtml } = require('../variables/paths')
-const formatWebpackMessages = require('../dev-utils/formatWebpackMessages')
 
 const { measureFileSizesBeforeBuild, printFileSizesAfterBuild } =
   FileSizeReporter
@@ -83,21 +84,38 @@ function build(previousFileSizes) {
           process.env.CI.toLowerCase() !== 'false') &&
         messages.warnings.length
       ) {
-        console.log(
-          chalk.yellow(
-            '\nTreating warnings as errors because process.env.CI = true.\n' +
-              'Most CI servers set it automatically.\n'
-          )
+        // Ignore sourcemap warnings in CI builds. See #8227 for more info.
+        const filteredWarnings = messages.warnings.filter(
+          (w) => !/Failed to parse source map/.test(w)
         )
-
-        return reject(new Error(messages.warnings.join('\n\n')))
+        if (filteredWarnings.length) {
+          console.log(
+            chalk.yellow(
+              '\nTreating warnings as errors because process.env.CI = true.\n' +
+                'Most CI servers set it automatically.\n'
+            )
+          )
+          return reject(new Error(filteredWarnings.join('\n\n')))
+        }
       }
 
-      return resolve({
+      const resolveArgs = {
         stats,
         previousFileSizes,
         warnings: messages.warnings
-      })
+      }
+      const argv = process.argv.slice(2)
+      const writeStatsJson = argv.indexOf('--stats') !== -1
+
+      if (writeStatsJson) {
+        // eslint-disable-next-line promise/no-promise-in-callback
+        return bfj
+          .write(`${appBuild}/bundle-stats.json`, stats.toJson())
+          .then(() => resolve(resolveArgs))
+          .catch((error) => reject(new Error(error)))
+      }
+
+      return resolve(resolveArgs)
     })
   })
 }

src/commands/start.js

@@ -56,26 +56,13 @@ module.exports = async (defaultPort) => {
     const config = configFactory()
     const useTypeScript = fs.existsSync(appTsConfig)
     const useYarn = fs.existsSync(yarnLockFile)
-    const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true'
-    const devSocket = {
-      warnings: (warnings) => {
-        console.warn(warnings)
-        devServer.sockWrite(devServer.sockets, 'warnings', warnings)
-      },
-      errors: (errors) => {
-        console.error(errors)
-        devServer.sockWrite(devServer.sockets, 'errors', errors)
-      }
-    }
     const compiler = createCompiler({
       appName,
       config,
-      devSocket,
       urls,
       useYarn,
       webpack,
-      useTypeScript,
-      tscCompileOnError
+      useTypeScript
     })
     const serverConfig = {
       ...config.devServer,

src/lib/react-app.d.ts

@@ -0,0 +1,100 @@
+/// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly __DEV__: 'development' | 'production' | 'test'
+  }
+}
+
+declare const __DEV__: boolean
+declare const SENTRY_DSN: string
+declare const APP_ENV: string
+declare const SENTRY_RELEASE: string
+
+declare module '*.avif' {
+  const src: string
+  export default src
+}
+
+declare module '*.bmp' {
+  const src: string
+  export default src
+}
+
+declare module '*.gif' {
+  const src: string
+  export default src
+}
+
+declare module '*.jpg' {
+  const src: string
+  export default src
+}
+
+declare module '*.jpeg' {
+  const src: string
+  export default src
+}
+
+declare module '*.png' {
+  const src: string
+  export default src
+}
+
+declare module '*.webp' {
+  const src: string
+  export default src
+}
+
+declare module '*.svg' {
+  import * as React from 'react'
+
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >
+
+  const src: string
+  export default src
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.css?modules' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.scss?modules' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.less?modules' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.sass?modules' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}