предисловие
- Наконец-то появился хороший учебник. В статье в основном рассказывается о создании проекта React Spa. Используемый стек технологий — vite+react+ts. Мне не нужно представлять vite. Я использовал его и сказал, что он хорош. React + ts стал мейнстримом крупномасштабных проектов, и он очень популярен среди крупных производителей, поэтому изучение React + ts поможет вам в будущем выйти на большие фабрики.
- Этот проект будет иметь строгие спецификации, спецификации eslint, спецификации stylelint, спецификации типа ts и спецификации отправки git, включая упаковку и онлайн-анализ объема, анализ производительности и способы оптимизации проекта. Позвольте вам испытать «удовольствие» от сотрудничества нескольких человек в разработке крупномасштабных проектов. Функциональная архитектура разработки также является отличной практикой интеграции сообщества. Давайте начнем создавать проекты вместе.
- В первой статье в основном рассказывается о базовой настройке некоторых проектов перед тем, как приступить к написанию фактического бизнес-кода.
- адрес проекта:vite-react-ts
Форсайт стека технологий
-
Шаблон: используется официальный шаблон Vite react 17+ typescript 4+
yarn create vite why-react --template react-ts -
less: имя меньшего файла в проекте должно заканчиваться на module.less
yarn add less -
проверка отправки кода git,
yarn add yorkie lint-staged -D-
Используемый йорк не использует хаски, йорки от yyds fork husky, Затем внесли некоторые пользовательские изменения, чтобы хуки читались из свойства «gitHooks» в package.json.
-
gitHooks Git Hooks — это скрипты, которые запускаются, когда Git выполняет определенные события (такие как фиксация, отправка, получение и т. д.), аналогичные «функциям ловушек». В каталоге .git/hooks проекта есть несколько примеров скриптов хуков, оканчивающихся на .sample.Если вы хотите включить соответствующий хук, просто удалите суффикс вручную. (Удалите суффикс .sample хука, чтобы включить скрипт хука, который по умолчанию отключен.)
-
Перед отправкой кода проверка правил кода может гарантировать, что код, поступающий в репозиторий git, соответствует правилам кода. Однако запуск lint для всего проекта будет очень медленным, так как lint-staged позволяет lint обнаруживать файлы только во временной области.
-
-
Я не буду повторять важность многопользовательской спецификации кода eslint, это очень важно
eslint yarn add eslint -D // 然后终端运行 npx eslint --init // 项目根目录会自动新建.eslintrc.js文件 注意：不要用自带的npm安装会装不了对应插件 module.exports = { env: { browser: true, es2021: true, node: true, }, extends: [ "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", ], parser: "@typescript-eslint/parser", parserOptions: { ecmaFeatures: { jsx: true, }, ecmaVersion: 12, sourceType: "module", }, plugins: ["react", "@typescript-eslint"], rules: { "arrow-body-style": 0, "jsx-a11y/label-has-for": 0, "max-lines-per-function": [ 2, { max: 320, skipComments: true, skipBlankLines: true }, ], "no-confusing-arrow": 0, "no-nested-ternary": 0, "no-console": 2, "no-param-reassign": [ 2, { props: true, ignorePropertyModificationsFor: ["draft"] }, ], "react/no-this-in-sfc": 0, }, }; -
prettier
-
Он используется для форматирования кода. С Prettier он может удалить исходный стиль кода и гарантировать, что код команды использует тот же формат. Исходные слова на официальном сайте: «Создание и применение руководства по стилю».
-
Отличие его от серии Linter, такой как ESLint, в том, что Prettier — это инструмент, который фокусируется на форматировании кода и не выполняет проверку качества кода, но если правила команды не едины, вы будете знать, что такое красный код.
yarn add prettier -D
-
-
stylelint
- styleLint — это «мощный современный инструмент обнаружения CSS», похожий на ESLint, который помогает нам избежать ошибок в таблицах стилей, определяя ряд правил стиля кодирования.
- Порядок написания и принцип стилей CSS - очень важно! Очень важный! Очень важный! В двух словах, он включает в себя принцип рендеринга браузера: перекомпоновать и перерисовать.
- Многие мелкие партнеры могут не иметь концепции, см.Порядок написания и принцип стилей CSS - очень важно!
// 终端运行 yarn add stylelint stylelint-config-standard -D // .stylelintrc.js 配置 module.exports = { extends: "stylelint-config-standard", rules: { // 颜色值小写 "color-hex-case": "lower", // 注释前无须空行 "comment-empty-line-before": "never", // 使用数字或命名的 (可能的情况下) font-weight 值 "font-weight-notation": null, // 在函数的逗号之后要求有一个换行符或禁止有空白 "function-comma-newline-after": null, // 在函数的括号内要求有一个换行符或禁止有空白 "function-parentheses-newline-inside": null, // url使用引号 "function-url-quotes": "always", // 字符串使用单引号 "string-quotes": "single", // 禁止低优先级的选择器出现在高优先级的选择器之后 "no-descending-specificity": null, // 禁止空源 "no-empty-source": null, // 禁止缺少文件末尾的换行符 "no-missing-end-of-source-newline": null, }, }; -
"""Более
Конфигурация редактора
- Рекомендуется использовать веб-шторм, чтобы открывать настройки и напрямую искать eslint stylelint prettier.
- stylelint
- eslint
- prettier
Отдел каталогов проектов
- Концепции компонентов пользовательского интерфейса и компонентов-контейнеров существуют в React. Как следует из названия, компонент пользовательского интерфейса в основном управляет отображением компонента и не связан со слишком большой логикой Компонент-контейнер реализует некоторую конкретную логику, представляет компонент пользовательского интерфейса в качестве своего подкомпонента и передает некоторые данные, необходимые для подкомпонент (компонент пользовательского интерфейса) через компоненты Способ передачи значения передается компоненту пользовательского интерфейса для рендеринга данных. Этот проект также будет разделен на страницы в соответствии с этим правилом
- компоненты общедоступные компоненты
- Все компоненты в этом каталоге — чистые компоненты, не связанные с бизнесом, позже я также отправлю этот пакет в npm отдельно.
- материалы Бизнес общественные компоненты
- Этот каталог содержит компоненты и бизнес-привязки, связанные с текущим бизнес-процессом.
- крючки нестандартные крючки
- страницы компонент страницы
- определение интерфейса службы
- класс инструментов utils
Конфигурация среды
перекрестный домен
- Интервью воры любят спрашивать, в основном в дополнение к настройке локального агента, внешний интерфейс версии выпуска не обрабатывает междоменные, в большинстве сценариев.
- локальный прокси
server: { port: 3001, proxy: { "/XXX": { target: "https://XXX", changeOrigin: true, cookieDomainRewrite: "", secure: false, }, }, }, - онлайн nginx
Конфигурация файла package.json
- нас
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"serve": "vite preview",
// 主要配置 触发pre-commit 进行elint stylelint 格式校验
"lint": "npm run lint:js && npm run lint:style && npm run lint:prettier",
"lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
"lint:prettier": "prettier --check "**/*" --end-of-line auto",
"lint:style": "stylelint --fix "src/**/*.less" --syntax less",
"lint-staged": "lint-staged",
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx "
},
// 使用yorkie 来自动触发识别 gitHooks这个钩子，然后执行pre-commit 然后在执行lint-staged
"gitHooks": {
"pre-commit": "lint-staged"
},
// lint-staged 配置 校验less,ts,tsx等文件有无不规范写法
"lint-staged": {
"*.less": "stylelint --syntax less",
"*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
"*.{js,jsx,tsx,ts,less,md,json}": [
"prettier --write"
]
},
end
-
Адрес проекта: добро пожаловать на звездную вилкуvite-react-ts
-
В этом проекте будут синхронные видеоуроки, которые время от времени будут транслироваться в прямом эфире на определенной станции, и каждый сможет подключиться к этому проекту онлайн, и мы будем учиться друг у друга.