feat: reborn of the project

.babelrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+    presets: [
+        [
+            '@babel/preset-env',
+            {
+                useBuiltIns: 'usage',
+                corejs: '3.35',
+            },
+        ],
+        [
+            '@babel/preset-react',
+            {
+                runtime: 'automatic',
+            },
+        ],
+        '@babel/preset-typescript',
+    ],
+    plugins: ['@babel/plugin-syntax-dynamic-import'],
+};

.editorconfig

@@ -0,0 +1,33 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+[*.{js,py}]
+charset = utf-8
+
+# 4 space indentation
+[*.py]
+indent_style = space
+indent_size = 4
+
+# Tab indentation (no size specified)
+[Makefile]
+indent_style = space
+
+# Indentation override for all JS under lib directory
+[lib/**.js]
+indent_style = space
+indent_size = 4
+
+# Matches the exact files either package.json or .travis.yml
+[{package.json,.travis.yml,tsconfig.json}]
+indent_style = space
+indent_size = 4

.eslintignore

@@ -0,0 +1,3 @@
+package.json
+package-lock.json
+tsconfig.json

.eslintrc.cjs

@@ -0,0 +1,67 @@
+module.exports = {
+    env: {
+        browser: true,
+        es2022: true,
+        node: true,
+    },
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'prettier',
+        'plugin:react/all',
+        'plugin:react/jsx-runtime',
+        'plugin:react-hooks/recommended',
+    ],
+    overrides: [],
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+    },
+    plugins: ['@typescript-eslint', 'prettier', 'react', 'react-hooks'],
+    rules: {
+        indent: [
+            'error',
+            4,
+            {
+                SwitchCase: 1,
+            },
+        ],
+        'linebreak-style': ['error', 'unix'],
+        quotes: ['error', 'single', { avoidEscape: true }],
+        semi: ['error', 'always'],
+        'prettier/prettier': [
+            'error',
+            {},
+            {
+                usePrettierrc: true,
+            },
+        ],
+        '@typescript-eslint/no-var-requires': 'off',
+        'react/jsx-filename-extension': [
+            'error',
+            {
+                extensions: ['.js', '.jsx', '.tsx'],
+            },
+        ],
+        'react/jsx-no-literals': 'off',
+        'react/jsx-one-expression-per-line': ['error', { allow: 'single-child' }],
+        'react-hooks/exhaustive-deps': 'off',
+        'react/jsx-no-bind': [
+            1,
+            {
+                allowArrowFunctions: true,
+                allowFunctions: true,
+                allowBind: true,
+            },
+        ],
+        'react/function-component-definition': [
+            2,
+            {
+                namedComponents: 'arrow-function',
+                unnamedComponents: 'arrow-function',
+            },
+        ],
+        'react/prop-types': 'off',
+    },
+};

.gitignore

@@ -55,4 +55,9 @@ typings/
 .yarn-integrity
 
 # dotenv environment variables file
-.env
+.env
+
+# for MacOS
+.DS_Store
+
+dist/

.postcssrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+    plugins: [require('autoprefixer'), require('postcss-preset-env')],
+};

.prettierignore

@@ -0,0 +1,3 @@
+package.json
+package-lock.json
+tsconfig.json

.prettierrc.yml

@@ -0,0 +1,9 @@
+printWidth: 120
+tabWidth: 4
+semi: true
+singleQuote: true
+trailingComma: 'es5'
+bracketSameLine: false
+arrowParens: 'avoid'
+singleAttributePerLine: true
+proseWrap: never

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit",
+    },
+    "editor.formatOnSave": true,
+    "eslint.enable": true,
+    "typescript.tsdk": "./node_modules/typescript/lib",
+    "typescript.enablePromptUseWorkspaceTsdk": true
+}

README.md

@@ -0,0 +1,37 @@
+# Webpack React New
+
+This is a basic template with `React 18 + TypeScript + Webpack 5`. You can use this repository as your project template.
+
+## Installation
+
+Please note:
+
+* The Node.js version must be `>= 14`.
+* It's recommended to use the LTS version.
+
+```sh
+# Clone this template
+$ npx degit https://github.com/My-Project-Template/webpack-react-new.git YOUR_PROJECT_DIRECTORY
+
+# Using yarn
+$ yarn dlx degit https://github.com/My-Project-Template/webpack-react-new.git YOUR_PROJECT_DIRECTORY
+
+# Using pnpm
+$ pnpm dlx degit https://github.com/My-Project-Template/webpack-react-new.git YOUR_PROJECT_DIRECTORY
+
+# Navigate to your project directory
+$ cd YOUR_PROJECT_DIRECTORY
+$ rm -rf package-lock.json
+
+# If you're using npm
+$ npm i
+$ npm run dev
+
+# If you're using yarn
+$ yarn
+$ yarn dev
+
+# Or, if you're using pnpm, the following line is crucial!
+$ pnpm up
+$ pnpm run dev
+```

confs/CheckNodejsVersion.ts

@@ -0,0 +1,36 @@
+import { versions, release } from 'process';
+
+/** the options */
+type Opts = Partial<{
+    /** @description the lowest version */
+    lowestVersion: number;
+    /** @description the highest version */
+    highestVersion: number;
+    /** @description is limited to LTS */
+    isTakingLTS: boolean;
+}>;
+
+/** @description Check node.js version before running programme. */
+export const checkNodejsVersion = (opts: Opts = {}) => {
+    const { lowestVersion = 14, highestVersion, isTakingLTS = true } = opts || {};
+
+    const [greatestVersion] = versions.node.split('.').map(v => +v);
+
+    // Check the greatest version is equal to or more than the lowest version.
+    if (lowestVersion && greatestVersion < lowestVersion) {
+        throw new Error(`The Nodejs version should be >= ${lowestVersion}`);
+    }
+
+    // Check the greatest version is equal to or less than the highest version.
+    if (highestVersion && greatestVersion > highestVersion) {
+        throw new Error(`The Nodejs version should be <= ${highestVersion}`);
+    }
+
+    // Check whether is LTS version or not.
+    const { lts } = release;
+    if (isTakingLTS && (greatestVersion % 2 === 1 || !lts)) {
+        throw new Error('Must use LTS version!');
+    }
+
+    console.log('The Nodejs version is valid!');
+};

confs/index.ts

@@ -0,0 +1,3 @@
+export { createBasicConfig } from './webpack';
+export { checkNodejsVersion } from './CheckNodejsVersion';
+export type { SelfDefineOptions } from './webpack';