Skip to content
GitLab

customize react-scripts; add prettier and less

Closed Administrator requested to merge github/fork/xiaochuan1719/feat/less-and-prettier into main
Compare
and
3 files
+ 114
- 20
packages/re‎act-scripts‎
con‎fig‎
webpack.‎config.js‎ +64 -0
webpackDevSer‎ver.config.js‎ +39 -16
packag‎e.json‎ +11 -4
packages/react-scripts/config/webpack.config.js
+ 64
- 0
@@ -81,6 +81,8 @@ const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
const hasJsxRuntime = (() => {
if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
@@ -177,6 +179,12 @@ module.exports = function (webpackEnv) {
},
].filter(Boolean);
if (preProcessor) {
// support antd customize theme
const modifyVars = {};
const lessToJs = require("less-vars-to-js");
const antdCustomizeThemeVariables = lessToJs(fs.readFileSync(path.resolve(paths.appSrc, 'styles/antd.customize.less'), 'utf-8'));
Object.assign(modifyVars, antdCustomizeThemeVariables);
loaders.push(
{
loader: require.resolve('resolve-url-loader'),
@@ -189,7 +197,20 @@ module.exports = function (webpackEnv) {
loader: require.resolve(preProcessor),
options: {
sourceMap: true,
...(preProcessor === 'less-loader' && {
modifyVars,
javascriptEnabled: true,
})
},
},
{
loader: require.resolve('style-resources-loader'),
options:{
patterns: [
preProcessor === 'less-loader' && path.resolve(paths.appSrc, "styles/variables.less"),
preProcessor === 'sass-loader' && path.resolve(paths.appSrc, 'styles/variables.scss'),
].filter(Boolean)
}
}
);
}
@@ -584,6 +605,49 @@ module.exports = function (webpackEnv) {
'sass-loader'
),
},
// ========= start xiaochuan1719 ======== fixed: less supported
// Opt-in support for LESS (using .scss or .less extensions).
// By default we support SASS Modules with the extensions .module.less
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'icss',
},
},
'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using LESS
// using the extension .module.less
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'local',
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
// ========= end xiaochuan1719 ========
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
packages/react-scripts/config/webpackDevServer.config.js
+ 39
- 16
@@ -15,6 +15,7 @@ const ignoredFiles = require('react-dev-utils/ignoredFiles');
const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
const paths = require('./paths');
const getHttpsConfig = require('./getHttpsConfig');
const redirectServedPathMiddleware = require('react-dev-utils/redirectServedPathMiddleware');
const host = process.env.HOST || '0.0.0.0';
const sockHost = process.env.WDS_SOCKET_HOST;
@@ -109,27 +110,49 @@ module.exports = function (proxy, allowedHost) {
},
// `proxy` is run between `before` and `after` `webpack-dev-server` hooks
proxy,
onBeforeSetupMiddleware(devServer) {
// Keep `evalSourceMapMiddleware`
// middlewares before `redirectServedPath` otherwise will not have any effect
// This lets us fetch source contents from webpack for the error overlay
devServer.app.use(evalSourceMapMiddleware(devServer));
// ====== start xiaochuan1719 ====== fixed: 'onBeforeSetupMiddleware' and 'onAfterSetupMiddleware' option is deprecated
// onBeforeSetupMiddleware(devServer) {
// // Keep `evalSourceMapMiddleware`
// // middlewares before `redirectServedPath` otherwise will not have any effect
// // This lets us fetch source contents from webpack for the error overlay
// devServer.app.use(evalSourceMapMiddleware(devServer));
// if (fs.existsSync(paths.proxySetup)) {
// // This registers user provided middleware for proxy reasons
// require(paths.proxySetup)(devServer.app);
// }
// },
// onAfterSetupMiddleware(devServer) {
// // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
// devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
// // This service worker file is effectively a 'no-op' that will reset any
// // previous service worker registered for the same host:port combination.
// // We do this in development to avoid hitting the production cache if
// // it used the same host and port.
// // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
// devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
// },
onBeforeSetupMiddleware: undefined,
onAfterSetupMiddleware: undefined,
setupMiddlewares: (middlewares, devServer) => {
if (!devServer) {
throw new Error("webpack-dev-server is not defined");
}
if (fs.existsSync(paths.proxySetup)) {
// This registers user provided middleware for proxy reasons
require(paths.proxySetup)(devServer.app);
}
},
onAfterSetupMiddleware(devServer) {
// Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
// This service worker file is effectively a 'no-op' that will reset any
// previous service worker registered for the same host:port combination.
// We do this in development to avoid hitting the production cache if
// it used the same host and port.
// https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
},
middlewares.push(
evalSourceMapMiddleware(devServer),
redirectServedPathMiddleware(paths.publicUrlOrPath),
noopServiceWorkerMiddleware(paths.publicUrlOrPath)
);
return middlewares;
}
// ====== end xiaochuan1719 ======
};
};
packages/react-scripts/package.json
+ 11
- 4
{
"name": "react-scripts",
"name": "@xiaochuan1719/react-scripts",
"version": "5.0.1",
"description": "Configuration and scripts for Create React App.",
"repository": {
"type": "git",
"url": "https://github.com/facebook/create-react-app.git",
"url": "https://github.com/xiaochuan1719/create-react-app.git",
"directory": "packages/react-scripts"
},
"license": "MIT",
@@ -12,7 +12,7 @@
"node": ">=14.0.0"
},
"bugs": {
"url": "https://github.com/facebook/create-react-app/issues"
"url": "https://github.com/xiaochuan1719/create-react-app/issues"
},
"files": [
"bin",
@@ -34,6 +34,7 @@
"babel-jest": "^27.4.2",
"babel-loader": "^8.2.3",
"babel-plugin-named-asset-import": "^0.3.8",
"babel-plugin-import": "^1.13.5",
"babel-preset-react-app": "^10.0.1",
"bfj": "^7.0.2",
"browserslist": "^4.18.1",
@@ -44,7 +45,9 @@
"dotenv": "^10.0.0",
"dotenv-expand": "^5.1.0",
"eslint": "^8.3.0",
"eslint-config-prettier": "^8.5.0",
"eslint-config-react-app": "^7.0.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-webpack-plugin": "^3.1.1",
"file-loader": "^6.2.0",
"fs-extra": "^10.0.0",
@@ -53,6 +56,9 @@
"jest": "^27.4.3",
"jest-resolve": "^27.4.2",
"jest-watch-typeahead": "^1.0.0",
"less": "^4.1.3",
"less-loader": "^11.0.0",
"less-vars-to-js": "^1.3.0",
"mini-css-extract-plugin": "^2.4.5",
"postcss": "^8.4.4",
"postcss-flexbugs-fixes": "^5.0.2",
@@ -62,12 +68,13 @@
"prompts": "^2.4.2",
"react-app-polyfill": "^3.0.0",
"react-dev-utils": "^12.0.1",
"react-refresh": "^0.11.0",
"react-refresh": "^0.14.0",
"resolve": "^1.20.0",
"resolve-url-loader": "^4.0.0",
"sass-loader": "^12.3.0",
"semver": "^7.3.5",
"source-map-loader": "^3.0.0",
"style-resources-loader": "^1.5.0",
"style-loader": "^3.3.1",
"tailwindcss": "^3.0.2",
"terser-webpack-plugin": "^5.2.5",