.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2

.github/workflows/github-actions.yml

@@ -0,0 +1,31 @@
+name: Test
+run-name: ${{ github.actor }} 🚀
+on:
+  push:
+  pull_request:
+    branches:
+      - 'main'
+
+jobs:
+  Linting:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+      - run: yarn
+      - run: yarn lint
+  TypeChecking:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+      - run: yarn
+      - run: yarn typecheck

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.1.1.cjs

CHANGELOG.md

@@ -1,4 +1,33 @@
 # ksv741 React Scripts
+## [0.2.0](https://github.com/ksv741/react-scripts/compare/v0.1.0...v0.2.0) (2024-04-04)
+
+
+### ⚠ BREAKING CHANGES
+
+* remove `port` option, use `devServer` option instead
+
+### 🛠️ Bug Fixes
+
+* add inks ([6674e6a](https://github.com/ksv741/react-scripts/commit/6674e6ac22f0f4cf66897668b4014d52bad68aa6))
+* fix checking package function ([3e7e77c](https://github.com/ksv741/react-scripts/commit/3e7e77c111034a5817e71da55414acc376efc1c9))
+* fix loading loaders ([b0cba07](https://github.com/ksv741/react-scripts/commit/b0cba07f671048b92198668dfaf5bd73acc2cdc7))
+* fix resolve dependency of dependencies ([63f37d6](https://github.com/ksv741/react-scripts/commit/63f37d6c19f469608087df86e301292ad3dd368e))
+* **loaders:** enable usage esm modules ([93159ec](https://github.com/ksv741/react-scripts/commit/93159ec92f94462b0b8fb19e3c5c842adb43d612))
+* **loaders:** fix css modules ([506c929](https://github.com/ksv741/react-scripts/commit/506c929141409b685f38b7e8468eba1b5f144fdd))
+* **loaders:** fix loaders module resolution ([fa6d0d7](https://github.com/ksv741/react-scripts/commit/fa6d0d701e3b21f0a7fbb5f87e794a4ce3689533))
+* **plugins:** disable eslint with version lower 8.0.0 ([3e90849](https://github.com/ksv741/react-scripts/commit/3e908496b3076c405f6056e203e19a11ee4e5a2a))
+* **plugins:** fix global process variable ([83e421d](https://github.com/ksv741/react-scripts/commit/83e421d63ab22f41cb3f5cfb914446e48d794c50))
+
+
+### 🚀 New Features
+
+* add `devServer` option ([b344e3e](https://github.com/ksv741/react-scripts/commit/b344e3ead38419b048a468d32fb216ebb17e128b))
+* add dotenv support ([7059f50](https://github.com/ksv741/react-scripts/commit/7059f50d1ff4697cbb9ef69f30bca7bc2c6c75ad))
+* add editor config ([6a6f8ae](https://github.com/ksv741/react-scripts/commit/6a6f8aeb74c4a7462bc0832d86f33d1b97986660))
+* add github actions ([8f2596e](https://github.com/ksv741/react-scripts/commit/8f2596e25b0e39b038216bf5112859c3f970e093))
+* add husky, commit linting ([affd0c0](https://github.com/ksv741/react-scripts/commit/affd0c02185aa2585f654c8da46c9a77c49a5499))
+* update README.md ([1fba3de](https://github.com/ksv741/react-scripts/commit/1fba3de84986a7c2639b9fbb6579b39be1b2724e))
+
 ### [0.1.2](https://github.com/ksv741/react-scripts/compare/v0.1.0...v0.1.2) (2024-03-29)
 
 

README.md

@@ -12,7 +12,7 @@
 - [`Кастомизация`](#кастомизация)
   - [`Режим запуска`](#режим-запуска)
   - [`Конфигурация путей`](#конфигурация-путей)
-  - [`Порт`](#порт)
+  - [`DevServer`](#devserver)
   - [`Загрузчики`](#загрузчики)
   - [`Анализ`](#анализ)
   - [`Плагины`](#плагины)
@@ -188,9 +188,25 @@ root.render(
 - `src` - путь до директории с исходными файлами, относительно которого будет находиться файл `entry`  
 По умолчанию - `src`
 
-#### Порт
-- `port` - порт, в котором будет запускаться dev server, для `mode = 'production'` настройка игнорируется  
-По умолчанию: `3000`
+### DevServer
+- `devServer` – объект с настройками devServer, для `mode = 'production'` настройка игнорируется  
+По умолчанию:
+  ```javascript
+  devServer: {
+    port: 3000,
+    open: false,
+    historyApiFallback: true,
+    hot: true,
+    compress: true,
+    client: {
+      overlay: {
+        errors: true,
+        warnings: false,
+        runtimeErrors: true,
+      }
+    }
+  }
+  ```
 
 #### Загрузчики
 - `mainLoader` - главный загрузчик javascript/typescript файлов, доступны `esbuild`, `swc`, `babel`, `ts-loader`     
@@ -213,6 +229,7 @@ root.render(
 - [HTMLWebpackPlugin](https://github.com/jantimon/html-webpack-plugin)
 - [ProgressPlugin](https://webpack.js.org/plugins/progress-plugin), доступен только в режиме `development`
 - [DefinePlugin](https://webpack.js.org/plugins/define-plugin)
+- [ProvidePlugin](https://webpack.js.org/plugins/provide-plugin/)
 - [ForkTsCheckerWebpackPlugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin)
 - [ESLintPlugin](https://github.com/webpack-contrib/eslint-webpack-plugin), доступен только в режиме `development`, а также при наличии установленного пакета `eslint`
 - [ReactRefreshWebpackPlugin](https://github.com/pmmmwh/react-refresh-webpack-plugin), доступен только в режиме `development`
@@ -240,6 +257,12 @@ root.render(
     'process.env.APP_VERSION': JSON.stringify(process.env.npm_package_version),
   }
   ```
+- `providePlugin` - настройка плагина [ProvidePlugin](https://webpack.js.org/plugins/provide-plugin/)
+  По умолчанию:
+  ```js
+  {
+    process: 'process/browser'
+  }
 - `forkTsCheckerPlugin` - настройка плагина [ForkTsCheckerWebpackPlugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin?tab=readme-ov-file#options)
 - `eslintPlugin` - настройка плагина [ESLintPlugin](https://github.com/webpack-contrib/eslint-webpack-plugin?tab=readme-ov-file#options)  
 По умолчанию: 

bin/scripts.js

@@ -16,6 +16,20 @@ if (!['start', 'build'].includes(command)) {
   process.exit(1);
 }
 
+switch (command) {
+  case 'start':
+    process.env.NODE_ENV = 'development';
+    break;
+
+  case 'build':
+    process.env.NODE_ENV = 'production';
+    break;
+
+  default:
+    process.env.NODE_ENV = 'development';
+    break;
+}
+
 const webpackArgv = ['webpack'];
 if (command === 'start') {
   webpackArgv.push('serve');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ksv741-react-scripts",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Webpack configuration for easy creating React applications",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -48,18 +48,13 @@
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
     "@svgr/webpack": "8.1.0",
     "@swc/core": "1.4.0",
-    "@types/node": "20.11.17",
-    "@types/react": "18.2.55",
-    "@types/react-dom": "18.2.19",
-    "@types/react-router-dom": "5.3.3",
-    "@types/sass-loader": "8.0.8",
-    "@types/webpack-bundle-analyzer": "4.7.0",
-    "@types/webpack-dev-server": "4.7.2",
     "babel-loader": "9.1.3",
     "copy-webpack-plugin": "12.0.2",
     "cross-spawn": "7.0.3",
     "css-loader": "6.10.0",
     "css-minimizer-webpack-plugin": "6.0.0",
+    "dotenv": "16.4.5",
+    "dotenv-expand": "11.0.6",
     "esbuild-loader": "4.0.3",
     "eslint-webpack-plugin": "4.0.1",
     "fork-ts-checker-webpack-plugin": "9.0.2",
@@ -68,9 +63,11 @@
     "postcss": "8.4.35",
     "postcss-loader": "8.1.0",
     "postcss-preset-env": "9.3.0",
+    "process": "0.11.10",
     "react-refresh": "0.14.0",
     "sass": "1.70.0",
     "sass-loader": "14.1.0",
+    "semver": "7.6.0",
     "style-loader": "3.3.4",
     "swc-loader": "0.2.6",
     "terser-webpack-plugin": "5.3.10",
@@ -78,24 +75,27 @@
     "ts-node": "10.9.2",
     "tsc-alias": "1.8.8",
     "tsconfig-paths-webpack-plugin": "4.1.0",
-    "typescript": "5.3.3",
     "webpack": "5.90.1",
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.0.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.2.1",
-    "@commitlint/config-conventional": "^19.1.0",
+    "@commitlint/cli": "19.2.1",
+    "@commitlint/config-conventional": "19.1.0",
+    "@types/node": "20.11.17",
+    "@types/sass-loader": "8.0.8",
+    "@types/webpack-bundle-analyzer": "4.7.0",
     "eslint": "8.57.0",
     "eslint-config-ksv741": "0.0.1",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.2",
-    "standard-version": "^9.5.0"
+    "husky": "9.0.11",
+    "lint-staged": "15.2.2",
+    "standard-version": "9.5.0",
+    "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "eslint": ">8.0.0",
-    "typescript": "^3.6.0"
+    "eslint": ">=8.0.0",
+    "typescript": ">=3.6.0"
   },
   "peerDependenciesMeta": {
     "eslint": {
@@ -104,6 +104,5 @@
     "typescript": {
       "optional": true
     }
-  },
-  "packageManager": "yarn@1.22.19"
+  }
 }

src/config/index.ts

@@ -115,11 +115,12 @@ const createConfig = (params?: WebpackOptions): webpack.Configuration => {
     analyze = false,
     mainLoader,
     svgLoader,
-    port = 3000,
     devtool = 'inline-source-map',
     plugins,
     loaders,
+    devServer,
   } = params ?? {};
+
   const {
     assets,
     html,
@@ -135,7 +136,6 @@ const createConfig = (params?: WebpackOptions): webpack.Configuration => {
     analyze,
     mainLoader,
     svgLoader,
-    port,
     paths: {
       assets,
       html,
@@ -147,6 +147,7 @@ const createConfig = (params?: WebpackOptions): webpack.Configuration => {
     },
     plugins,
     loaders,
+    devServer,
   };
 
   const isDev = mode === 'development';

src/dev-server/index.ts

@@ -3,14 +3,15 @@ import type { WebpackOptions } from 'types';
 
 const createDevServer = (options: WebpackOptions): DevServerConfiguration => {
   const {
-    port,
+    devServer,
   } = options;
 
   return {
-    port,
+    port: 3000,
     open: false,
     historyApiFallback: true,
     hot: true,
+    compress: true,
     client: {
       overlay: {
         errors: true,
@@ -18,6 +19,7 @@ const createDevServer = (options: WebpackOptions): DevServerConfiguration => {
         runtimeErrors: true,
       },
     },
+    ...devServer,
   };
 };
 

src/loaders/index.ts

@@ -1,11 +1,13 @@
 import type { WebpackOptions } from 'types';
 import type webpack from 'webpack';
+import getEsmLoader from './main-loaders/esm-loader';
 import { getAssetsLoaders } from './asset-loaders';
 import getMainLoader from './main-loaders';
 import { getStyleLoaders } from './style-loaders';
 import getSvgLoader from './svg-loaders';
 
 const createLoaders = (options: WebpackOptions): (webpack.RuleSetRule | null)[] => [
+  getEsmLoader(),
   getMainLoader(options),
   getSvgLoader(options),
   ...getStyleLoaders(options),

src/loaders/main-loaders/esm-loader/index.ts

@@ -0,0 +1,8 @@
+const getEsmLoader = () => ({
+  test: /\.m?js/,
+  resolve: {
+    fullySpecified: false,
+  },
+});
+
+export default getEsmLoader;

src/loaders/style-loaders/css-loader/index.ts

@@ -40,6 +40,7 @@ const getCssLoader = (options: WebpackOptions): webpack.RuleSetRule => {
             sourceMap: isDev,
             ...cssLoader,
             modules: {
+              auto: true,
               localIdentName: '[local]--[hash:5]',
               // @ts-ignore
               ...cssLoader?.modules,

src/plugins/define-plugin/dotenv.ts

@@ -0,0 +1,64 @@
+import fs from 'fs';
+import type { WebpackOptions } from 'types';
+
+import dotenv from 'dotenv';
+import dotenvExpand from 'dotenv-expand';
+import { REACT_APP } from 'utils/constants';
+import { resolveApp } from 'utils/helpers';
+
+const dotenvPath = resolveApp('.env');
+const dotenvFiles = [
+  `${dotenvPath}.${process.env.NODE_ENV}.local`,
+  process.env.NODE_ENV !== 'test' && `${dotenvPath}.local`,
+  `${dotenvPath}.${process.env.NODE_ENV}`,
+  dotenvPath,
+].filter(Boolean);
+
+dotenvFiles.forEach((dotenvFile) => {
+  if (!dotenvFile) {
+    return;
+  }
+
+  if (fs.existsSync(dotenvFile)) {
+    dotenvExpand.expand(dotenv.configDotenv({
+      path: dotenvFile,
+    }));
+  }
+});
+
+export const getClientEnvironment = (options: WebpackOptions) => {
+  const { mode } = options;
+  const isDev = mode === 'development';
+
+  const raw = Object.keys(process.env)
+    .filter((key) => REACT_APP.test(key))
+    .reduce(
+      (env, key) => {
+        // @ts-ignore
+        // eslint-disable-next-line no-param-reassign
+        env[key] = process.env[key];
+
+        return env;
+      },
+      {
+        NODE_ENV: process.env.NODE_ENV,
+        IS_DEV: isDev,
+        APP_VERSION: process.env.npm_package_version,
+      },
+    );
+
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      // @ts-ignore
+      // eslint-disable-next-line no-param-reassign
+      env[key] = JSON.stringify(raw[key]);
+
+      return env;
+    }, {}),
+  };
+
+  return {
+    raw,
+    stringified,
+  };
+};

src/plugins/define-plugin/index.ts

@@ -1,22 +1,20 @@
 import webpack from 'webpack';
 import type { WebpackOptions } from 'types';
+import { getClientEnvironment } from './dotenv';
 
 const getDefinePlugin = (options: WebpackOptions) => {
   const {
-    mode,
     plugins: {
       definePlugin,
     } = {},
   } = options;
-  const isDev = mode === 'development';
 
   if (definePlugin === 'off') {
     return null;
   }
 
   return new webpack.DefinePlugin({
-    'process.env.IS_DEV': JSON.stringify(isDev),
-    'process.env.APP_VERSION': JSON.stringify(process.env.npm_package_version),
+    ...getClientEnvironment(options).stringified,
     ...definePlugin,
   });
 };

src/plugins/eslint-plugin/index.ts

@@ -1,7 +1,8 @@
 import ESLintPlugin from 'eslint-webpack-plugin';
 import path from 'path';
+import semver from 'semver';
 import type { WebpackOptions } from 'types';
-import { hasPackage } from 'utils/helpers';
+import { getPackageVersion, hasPackage } from 'utils/helpers';
 
 const getEslintPlugin = (options: WebpackOptions) => {
   const {
@@ -11,7 +12,8 @@ const getEslintPlugin = (options: WebpackOptions) => {
     } = {},
   } = options;
 
-  if (!hasPackage('eslint') || eslintPlugin === 'off') {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  if (!hasPackage('eslint') || eslintPlugin === 'off' || semver.lt(getPackageVersion('eslint')!, '8.0.0')) {
     return null;
   }
 

src/plugins/index.ts

@@ -1,5 +1,6 @@
 import type webpack from 'webpack';
 import type { WebpackOptions } from 'types';
+import getProvidePlugin from './provide-plugin';
 import getBundleAnalyzerPlugin from './bundle-analyzer-plugin';
 import getCopyPlugin from './copy-plugin';
 import getDefinePlugin from './define-plugin';
@@ -20,6 +21,7 @@ const createPlugins = (options: WebpackOptions): webpack.Configuration['plugins'
   const developmentPlugins = [
     getHtmlPlugin(options),
     getProgressPlugin(options),
+    getProvidePlugin(options),
     getDefinePlugin(options),
     getForkTsCheckerPlugin(options),
     getEslintPlugin(options),
@@ -29,6 +31,7 @@ const createPlugins = (options: WebpackOptions): webpack.Configuration['plugins'
 
   const productionPlugins = [
     getHtmlPlugin(options),
+    getProvidePlugin(options),
     getDefinePlugin(options),
     getMiniCssPlugin(options),
     getForkTsCheckerPlugin(options),

src/plugins/provide-plugin/index.ts

@@ -0,0 +1,21 @@
+import type { WebpackOptions } from 'types';
+import { ProvidePlugin } from 'webpack';
+
+const getProvidePlugin = (options: WebpackOptions) => {
+  const {
+    plugins: {
+      providePlugin,
+    } = {},
+  } = options;
+
+  if (providePlugin === 'off') {
+    return null;
+  }
+
+  return new ProvidePlugin({
+    process: 'process/browser',
+    ...providePlugin,
+  });
+};
+
+export default getProvidePlugin;

src/resolvers/index.ts

@@ -13,11 +13,15 @@ const createResolvers = (options: WebpackOptions): webpack.ResolveOptions => {
     extensions: ['.tsx', '.ts', '.js', '.jsx'],
     mainFiles: ['index'],
     modules: [
+      'node_modules',
       paths.src,
       path.resolve(paths.root),
       path.resolve(paths.root, 'node_modules'),
     ],
     plugins: getResolversPlugins(options),
+    fallback: {
+      path: false,
+    },
   };
 };
 

src/types/index.ts

@@ -217,7 +217,6 @@ declare namespace BabelLoader {
 type WebpackOptions = {
   mode: WebpackMode;
   paths: WebpackPaths;
-  port: number;
   mainLoader?: WebpackMainLoaders;
   svgLoader?: 'inline' | 'svgr';
   analyze: boolean;
@@ -233,6 +232,7 @@ type WebpackOptions = {
     copyPlugin?: CopyPlugin.PluginOptions | 'off';
     ignorePlugin?: ConstructorParameters<typeof webpack.IgnorePlugin>[0] | 'off';
     analyzerPlugin?: BundleAnalyzerPlugin.Options | 'off';
+    providePlugin?: ConstructorParameters<typeof webpack.ProvidePlugin>[0] | 'off';
   };
   loaders?: {
     esbuildLoader?: EsbuildLoaderOptions | 'off';
@@ -256,6 +256,7 @@ type WebpackOptions = {
     };
   };
   cache?: webpack.Configuration['cache'] | 'off';
+  devServer?: webpack.Configuration['devServer'];
 };
 
 type WebpackEnv = {

src/utils/constants.ts

@@ -0,0 +1 @@
+export const REACT_APP = /^REACT_APP_/i;

src/utils/helpers.ts

@@ -1,13 +1,20 @@
 import fs from 'fs';
+import path from 'path';
 import type { PackageJson } from 'types';
 
-export const hasPackage = (packageName: string) => {
+export const getPackageVersion = (packageName: string) => {
   if (!packageName || !process.env.npm_package_json) {
-    return false;
+    return null;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-non-null-assertion
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const packageJson: PackageJson = JSON.parse(fs.readFileSync(process.env.npm_package_json, 'utf8'));
 
-  return Boolean(packageJson.dependencies[packageName] || packageJson.devDependencies[packageName]);
+  return packageJson.dependencies[packageName] || packageJson.devDependencies[packageName];
 };
+
+export const hasPackage = (packageName: string) => Boolean(getPackageVersion(packageName));
+
+export const appDirectory = fs.realpathSync(process.cwd());
+
+export const resolveApp = (relativePath: string) => path.resolve(appDirectory, relativePath);