feat: init

.commitlintrc.cjs

@@ -0,0 +1,25 @@
+// https://commitlint.js.org/#/concepts-commit-conventions
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'type-enum': [
+      2,
+      'always',
+      [
+        'feat', // new features
+        'fix', // bugfix
+        'docs', // midify doc
+        'style', // style-like's change, eg: remove space or format code
+        'refactor', // just refactor code, not add new features or fix bugs
+        'perf', // improve performance
+        'test', // add or midify test cases
+        'revert', // revert commit
+        'chore', // improve build or bundle tools
+      ],
+    ],
+    'type-empty': [2, 'never'],
+    'subject-empty': [2, 'never'],
+    'subject-full-stop': [0, 'never'],
+    'subject-case': [0, 'never'],
+  },
+};

.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,5 @@
+.DS_Store
+dist
+dist-ssr
+*.local
+node_modules/*

.eslintrc.cjs

@@ -0,0 +1,41 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    amd: true,
+    node: true,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'prettier', // Make sure this is always the last element in the array.
+  ],
+  plugins: ['simple-import-sort', 'react-hooks', '@typescript-eslint'],
+  rules: {
+    'no-unused-vars': 'off',
+    'no-undef': 'off',
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
+    'react/react-in-jsx-scope': 'off',
+    'react/prop-types': 'off',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'error',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-unused-vars': ['error'],
+    '@typescript-eslint/consistent-type-imports': ['error'],
+  },
+};

.gitignore

@@ -0,0 +1,12 @@
+# Logs
+logs
+*.log
+*.log*
+*.local
+
+.DS_Store
+node_modules
+dist
+dist-ssr
+
+public/build.json

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx commitlint --edit "$1"

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+pnpm type-check
+npx lint-staged

.npmrc

@@ -0,0 +1,3 @@
+registry=https://registry.npmjs.org/
+auto-install-peers=true
+strict-peer-dependencies=false

.prettierrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  semi: true,
+  trailingComma: 'all',
+  singleQuote: true,
+  printWidth: 90,
+  tabWidth: 2,
+  bracketSameLine: true,
+};

.stylelintrc.cjs

@@ -0,0 +1,25 @@
+module.exports = {
+  extends: [
+    'stylelint-config-standard',
+    'stylelint-config-rational-order',
+    'stylelint-config-prettier', // Make sure this is always the last element in the array.
+  ],
+  plugins: ['stylelint-order'],
+  customSyntax: 'postcss-less',
+  rules: {
+    'block-no-empty': null,
+    'no-empty-source': null,
+    'no-descending-specificity': null,
+    'color-function-notation': 'legacy',
+    'alpha-value-notation': 'number',
+    'hue-degree-notation': 'number',
+    'selector-class-pattern': null,
+    'font-family-no-missing-generic-family-keyword': null,
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        ignorePseudoClasses: ['global'],
+      },
+    ],
+  },
+};

.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.fixAll.stylelint": true
+  },
+
+  "eslint.alwaysShowStatus": true,
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+
+  "stylelint.enable": true,
+  "css.validate": false,
+  "less.validate": false,
+  "stylelint.validate": ["css", "less"]
+}

README.md

@@ -0,0 +1,17 @@
+# 搭个 h5 项目的脚手架
+
+### 构建命令
+
+```bash
+pnpm i                # 装依赖
+pnpm dev              # 本地开发
+pnpm build:dev        # 开发服务器生产环境打包
+pnpm build:test       # 测试服务器生产环境打包
+pnpm build:prod       # 生产服务器生产环境打包
+pnpm preview          # 本地打包并预览打包后的页面
+```
+
+### h5
+
+- h5 页面与大屏不同，大屏需要基于设计稿的宽高动态适配屏幕，而 h5 只需要适配屏幕的宽度
+- css 中的 px 自动转 rem，jsx 中的 px 需要使用 `toAdaptedPx` 包裹

index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- <link rel="icon" type="image/jpeg" href="/favicon.png" /> -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>某个h5系统</title>
+    <script src="/iconfont.js"></script>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,78 @@
+{
+  "name": "vite-react-h5",
+  "version": "0.0.1",
+  "license": "MIT",
+  "homepage": "https://vite-react-h5.vercel.app/",
+  "scripts": {
+    "prepare": "husky install .husky",
+    "preinstall": "npx only-allow pnpm",
+    "dev": "cross-env VITE_MODE=local vite",
+    "build:dev": "tsc && cross-env VITE_MODE=dev vite build",
+    "build:test": "tsc && cross-env VITE_MODE=test vite build",
+    "build:prod": "tsc && cross-env VITE_MODE=prod vite build",
+    "preview": "pnpm build:dev && vite preview",
+    "lint": "pnpm lint:jsFix && pnpm lint:styleFix && pnpm lint:format",
+    "lint:jsFix": "eslint --ext .jsx,.js,.ts,.tsx --fix ./src",
+    "lint:format": "prettier --loglevel warn --write \"./src/**/*.{js,jsx,ts,tsx,css,less,md,json}\"",
+    "lint:styleFix": "stylelint --fix ./src/**/*?\\(.module\\).{css,less} ",
+    "type-check": "tsc"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx},!public/**/*.js": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{css,less},!public/**/*.css": [
+      "stylelint --fix",
+      "prettier --write"
+    ],
+    "*.{md,json}": "prettier --write"
+  },
+  "dependencies": {
+    "@stitches/react": "^1.2.8",
+    "antd-mobile": "^5.20.0",
+    "antd-mobile-icons": "^0.3.0",
+    "clsx": "^1.2.1",
+    "dayjs": "^1.11.4",
+    "jotai": "^1.6.4",
+    "nanoevents": "^7.0.1",
+    "nanoid": "^4.0.0",
+    "normalize.css": "^8.0.1",
+    "qss": "^2.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^16.2.1",
+    "@commitlint/config-conventional": "^16.2.1",
+    "@types/node": "^17.0.23",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
+    "@typescript-eslint/eslint-plugin": "^5.12.1",
+    "@typescript-eslint/parser": "^5.12.1",
+    "@vitejs/plugin-legacy": "^1.5.1",
+    "@vitejs/plugin-react": "^1.0.7",
+    "autoprefixer": "^10.4.2",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.10.0",
+    "eslint-config-prettier": "^8.4.0",
+    "eslint-plugin-react": "^7.29.2",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "husky": "^7.0.1",
+    "less": "^4.1.2",
+    "lint-staged": "^12.3.4",
+    "postcss-less": "^6.0.0",
+    "postcss-pxtorem": "^6.0.0",
+    "prettier": "^2.5.1",
+    "stylelint": "^14.5.3",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-standard": "^25.0.0",
+    "stylelint-order": "^5.0.0",
+    "typescript": "^4.6.4",
+    "vconsole": "^3.14.6",
+    "vite": "^2.9.13"
+  }
+}

public/iconfont.js

@@ -0,0 +1,66 @@
+(window._iconfont_svg_string_3856972 =
+  '<svg><symbol id="icon-phone" viewBox="0 0 1024 1024"><path d="M736 0 288 0c-52.8 0-96 43.2-96 96l0 832c0 52.8 43.2 96 96 96l448 0c52.8 0 96-43.2 96-96L832 96C832 43.2 788.8 0 736 0zM384 48l256 0 0 32L384 80 384 48zM512 960c-35.346 0-64-28.654-64-64s28.654-64 64-64 64 28.654 64 64S547.346 960 512 960zM768 768 256 768 256 128l512 0L768 768z" fill="#000000" ></path></symbol><symbol id="icon-yanzhengma" viewBox="0 0 1024 1024"><path d="M891.306667 279.04c-2.133333-37.546667-29.44-68.693333-66.133334-75.946667-47.786667-7.253333-95.146667-18.346667-141.653333-32-44.8-17.92-86.613333-41.813333-124.586667-71.253333-30.72-20.48-71.68-18.773333-100.693333 4.693333-35.84 31.146667-78.08 54.613333-123.733333 67.84-43.52 17.92-89.173333 29.44-136.106667 33.706667-37.546667 4.693333-66.133333 35.84-67.84 73.813333v238.506667c3.413333 208.64 247.893333 420.693333 383.146667 420.693333 132.693333 0 342.613333-147.626667 374.613333-416.426666 5.546667-81.493333 6.4-162.56 2.986667-243.626667z m-70.4 236.8c-29.013333 235.946667-212.053333 354.56-306.773334 354.56-40.533333 0-119.893333-38.4-192.853333-111.786667-76.373333-76.8-120.746667-164.693333-122.453333-241.066666V281.6c0.426667-4.266667 3.84-7.68 7.68-8.106667 51.626667-5.12 102.4-17.493333 150.613333-37.12 52.906667-16.213333 102.826667-43.52 144.213333-79.786666 3.413333-2.56 7.253333-3.413333 9.813334-3.413334 2.133333 0 5.12 0.426667 8.106666 2.133334 42.24 32.426667 88.746667 58.88 138.24 78.506666l2.986667 1.28 2.986667 0.853334c48.64 14.506667 98.56 26.026667 148.906666 34.133333 5.973333 1.28 9.813333 6.4 10.666667 12.373333 3.413333 77.653333 2.56 156.16-2.133333 233.386667z" fill="#4C4C4C" ></path><path d="M493.653333 637.866667c-13.226667 13.226667-34.986667 13.226667-48.213333 0l-120.746667-120.746667c-13.226667-13.226667-13.226667-34.986667 0-48.213333 13.226667-13.226667 34.986667-13.226667 48.213334 0l120.746666 120.746666c13.226667 13.226667 13.226667 34.986667 0 48.213334z" fill="#4C4C4C" ></path><path d="M699.733333 432.213333l-206.506666 206.506667c-12.8 12.8-33.706667 12.8-46.933334 0-12.8-12.8-12.8-33.706667 0-46.933333L652.8 385.28c12.8-12.8 33.706667-12.8 46.933333 0 12.8 12.8 12.8 33.706667 0 46.933333z" fill="#4C4C4C" ></path></symbol></svg>'),
+  (function (n) {
+    var t = (t = document.getElementsByTagName('script'))[t.length - 1],
+      e = t.getAttribute('data-injectcss'),
+      t = t.getAttribute('data-disable-injectsvg');
+    if (!t) {
+      var i,
+        o,
+        c,
+        l,
+        d,
+        a = function (t, e) {
+          e.parentNode.insertBefore(t, e);
+        };
+      if (e && !n.__iconfont__svg__cssinject__) {
+        n.__iconfont__svg__cssinject__ = !0;
+        try {
+          document.write(
+            '<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>',
+          );
+        } catch (t) {
+          console && console.log(t);
+        }
+      }
+      (i = function () {
+        var t,
+          e = document.createElement('div');
+        (e.innerHTML = n._iconfont_svg_string_3856972),
+          (e = e.getElementsByTagName('svg')[0]) &&
+            (e.setAttribute('aria-hidden', 'true'),
+            (e.style.position = 'absolute'),
+            (e.style.width = 0),
+            (e.style.height = 0),
+            (e.style.overflow = 'hidden'),
+            (e = e),
+            (t = document.body).firstChild ? a(e, t.firstChild) : t.appendChild(e));
+      }),
+        document.addEventListener
+          ? ~['complete', 'loaded', 'interactive'].indexOf(document.readyState)
+            ? setTimeout(i, 0)
+            : ((o = function () {
+                document.removeEventListener('DOMContentLoaded', o, !1), i();
+              }),
+              document.addEventListener('DOMContentLoaded', o, !1))
+          : document.attachEvent &&
+            ((c = i),
+            (l = n.document),
+            (d = !1),
+            r(),
+            (l.onreadystatechange = function () {
+              'complete' == l.readyState && ((l.onreadystatechange = null), s());
+            }));
+    }
+    function s() {
+      d || ((d = !0), c());
+    }
+    function r() {
+      try {
+        l.documentElement.doScroll('left');
+      } catch (t) {
+        return void setTimeout(r, 50);
+      }
+      s();
+    }
+  })(window);