Создайте среду TS+React с 0 до 1

React.js

предисловие

На момент написания этой статьи версия React уже17.x, машинопись тоже уже есть4.x, вебпак тоже пришел5.x. И бизнес нашей группы был очень загружен, поэтому наш шаблон проекта по-прежнему React16.x(функция хука не поддерживается), также没有支持TS,а такжеwebpackЕ Цай3.x, Это была конфигурация несколько лет назад. Конфигурация этого проекта подобна разбитому кораблю в море. Если вы не будете осторожны, он будет разбит волной. Конечно же, чем больше вы об этом беспокоитесь, что будет.Вдруг, когда мы пакуемся, Удивительно обнаружил, что запакованный плагин вышел из строя, из-за чего наша упаковка 📦 постоянно глючила. Наконец, для решения проблемы был заменен плагин, но это как сломанный корабль, и я не знаю, где будут проблемы.

Да, после стольких слов, я рыбак, который хочет сменить лодку🚢. Кто не хочет быть онлайн без проблем.

Создайте среду разработки TS+React

planA: Самый быстрый способ - использовать его напрямуюcreate-react-app:

npx create-react-app my-app --template typescript

Но кажется, что это немного скучно, тогда мы используемplanB, создайте этот проект вручную:

Установите React и TS

1. Установите соответствующую библиотеку

npm i react react-dom react-redux typescript --save

2. Установите библиотеку объявлений @types

npm i @types/react @types/react-dom @types/react-redux --save-dev

После установки версия пакета на моей стороне следующая:

  • react 17.0.1
  • react-dom 17.0.1
  • react-redux 7.2.3
  • typescript 4.1.3

Создайте tsconfig.json

tsconfig.jsonФайл можно понимать как хранящий компиляциюTSФайл конфигурации, здесь я вставляю свою собственную конфигурацию:

{
  "compilerOptions": {
    "target": "es5",  // 编译的目标
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "preserve",
    "baseUrl": "./",
    "paths": {
      "@": ["src/"]
    }
  },
  "include": ["./src/**/*"]
}

Частичный анализ конфигурации tsconfig

baseUrl:TS编译器Адрес модуля, который необходимо скомпилироватьpaths: на основеbaseUrlПуть указанного модуля и отношение сопоставления пути

import a from '../../src/a.ts';
等价于
import a from '@/a.ts';

include: целевая папка для компиляцииjsx: Эта конфигурация находится вtsxсредняя поддержкаjsx, необязательный параметрpreserve,reactа такжеreact-native. Эти режимы работают только на этапе генерации кода — проверка типов не затрагивается. существуетpreserveсохранится в сгенерированном коде в режимеJSXдля последующих операций преобразования (например:Babel). Кроме того, выходной файл будет иметь.jsxимя расширения. reactРежим генерируетReact.createElement, нет необходимости выполнять операцию преобразования перед использованием, а расширение выходного файла.js.react-nativeэквивалентноpreserve, что также сохраняет всеJSX, но расширение выходного файла.js.在这里插入图片描述

1. Для конкретного использования см. TS оИспользование baseUrl и путей2. tsconfig.jsonбольше конфигурации.

Как мы можем запустить наш проект?.tsxА файлы? Как я мог забытьwebpackЗатем следующий шаг должен установить и настроитьwebpack.

Установить веб-пакет

npm i webpack webpack-cli --save-dev
  • webpack 4.41.2
  • webpack-cli 3.3.10

настроить веб-пакет

После установки пакета долгое время кажется, что мы не начали писать никакого кода, тогда мы напишем код и настроим наш вебпак.

Структура каталогов веб-пакета:在这里插入图片描述Да, вы правильно догадались, я все-таки написал этот конфигурационный файл вебпака, придерживаясь принципа разделения властей.webpack.common.js: сохранить общедоступную конфигурациюwebpack.dev.js: Конфигурация среды разработки хранилищаwebpack.prod.jsХраните конфигурацию производственной среды

Конкретная конфигурация может перейти кофициальный сайт вебпакаСсылаться на. Здесь мы говорим о том, что необходимо для настройки ts.loaderнастроить


{
  test: /\.tsx?$/,
  exclude: /node_modules/,
  use: ['babel-loader', 'ts-loader']
}

pluginsнастроить

const aliasPath = require('../tsconfig.json').compilerOptions.paths;

resolve: {
	extensions: ['.ts', '.tsx', '.js', '.jsx'],
	alias: Object.keys(aliasPath).reduce((alias, key) => {
	   alias[key] = path.resolve(aliasPath[key][0]) + '';
	   return alias;
	}, {})
}

aliasЧитать здесьtsconfig.jsonСопоставление отношения пути в.

Далее нам нужно запустить проект, позвольте мне датьpackage.jsonДобавьте несколько команд:

"scripts": {
	// 开发环境
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.dev.js",
    // 生产环境打包
    "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.prod.js",
    // 打包大小分析
    "analyzer": "cross-env Analyzer=on npm run build && webpack-bundle-analyzer --port 8888 ./dist/analyzer.json"
  },

Пока что простойTS+ReactОкружение построено, и проект готов к запуску🎉. Но перед тем, как использовать его в команде, нам также нужно ограничить стиль кода каждого, иначе отступ одного файла равен 4, а отступ другого файла - 2. Это действительно неудобно. 😭 Кроме того, вам нужно использоватьESlintВыполните необходимые проверки кода.

Унифицированные инструменты стиля кода — красивее

Первым шагом является установкаprettier:

npm install prettier -D

После установки мы можем объявить два файла,.prettierignoreвыражатьprettierИгнорировать каталоги, которые не нужно проверять (можно понять, что это мое дело, мне не нужно, чтобы вы заботились), и.prettierrc.jsнашprettierПравилами определено место.在这里插入图片描述 .prettierignoreКонфигурация выглядит следующим образом:

# Ignore artifacts:
node_modules
dist
.vscode
.prettierignore

.prettierrc.jsКонфигурация выглядит следующим образом:

module.exports = {
  printWidth: 140,
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  trailingComma: 'none',
  bracketSpacing: true,
  jsxBracketSameLine: true,
  arrowParens: 'always',
  insertPragma: false,
  requirePragma: false,
  useTabs: false
};

Конфигурация у всех разная, поэтому пишите ее в соответствии со спецификациями вашей команды.

Если все используютvscode, однозначно рекомендую всем скачатьprettierплагин.在这里插入图片描述Разумеется, после скачивания необходимо всем напомнить, что конфигурация этого плагина глобальная, если вы хотите использовать текущий проектprettierЕсли вы настроили, рекомендуется создать каталог..vscodeпапку, объявитьsettings.json,существуетsettings.jsonКонфигурация в редакторе имеет приоритет над глобальной конфигурацией редактора.

settings.jsonКонфигурация выглядит следующим образом:

{
	// prettier规则使用当前目录的.prettierrc.js
	"prettier.configPath": ".prettierrc.js",
	// 保存的时候自动格式化
	"editor.formatOnSave": true,
}

Инструмент для решения проблемы качества кода — eslint

Конечно, следующим шагом в унификации стиля кода является решение проблемы качества кода, это все еще старый шаг, давайте сначала установим его:

npm i eslint -D

На этом этапе нам нужно объявитьeslintrc.jsдокумент:

module.exports = {
  parser: '@typescript-eslint/parser', // 定义ESLint的解析器
  extends: ['plugin:prettier/recommended'], //定义文件继承的子规范
  plugins: ['@typescript-eslint', 'react-hooks', 'eslint-plugin-react'], //定义了该eslint文件所依赖的插件
  env: {
    //指定代码的运行环境
    browser: true,
    node: true
  },
  settings: {
    //自动发现React的版本，从而进行规范react代码
    react: {
      pragma: 'React',
      version: 'detect'
    }
  },
  parserOptions: {
    //指定ESLint可以解析JSX语法
    ecmaVersion: 2019,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  rules: {
  	// 自定义的一些规则
  	'prettier/prettier': 'error',
    'linebreak-style': ['error', 'unix'],
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'react/jsx-uses-react': 'error',
    'react/jsx-uses-vars': 'error',
    'react/react-in-jsx-scope': 'error',
    'valid-typeof': [
      'warn',
      {
        requireStringLiterals: false
      }
    ]
  }
};

parserконфигурация: плагин@typescript-eslint/parserПусть ESLint анализирует TypeScript.

npm i @typescript-eslint/parser -D

extendsКонфигурация: чтобы предотвратить конфликты между правилами eslint и prettier, нам нужно интегрировать их и установить['plugin:prettier/recommended'].

npm i eslint-config-prettier eslint-plugin-prettier -D

pluginsКонфигурация:
@typescript-eslint: содержит различные определенные спецификации для обнаружения кода машинописного текста.react-hooks: Для обнаружения и регулирования спецификации кода виджета проверки хуков React.eslint-plugin-react: Реагируйте код, чтобы обнаружить и регулировать запись вставки.

npm i eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin -D

Наконец, нам нужно изменитьsettings.json

{
	"prettier.configPath": ".prettierrc.js",
	"eslint.options": {
        "extensions": [".js", ".ts", ".tsx", "jsx", "html"]
    },
    "editor.codeActionsOnSave": {
    	// 保存时使用eslint进行格式化
        "source.fixAll.eslint": true
    }
}

слишком далекоESlint+PrettierНастройка завершена, теперь нам нужно отправить наш код.

Канонический Git фиксирует

Мы хотим, чтобы наш код был полностью выполнен перед его фиксацией в репозиторий.代码格式化和代码质量检查Для этого нам нужно использовать инструмент нам.git缓存区Сделаны последние измененные файлы格式化а также lint 规则校验.

npm install husky lint-staged -D

Затем нам нужно изменитьpackage.jsonдокумент:

"husky": {
   "hooks": {
     "pre-commit": "lint-staged",
   }
 },
 "lint-staged": {
   "*.{ts,tsx,js,jsx}": [
     "eslint --config .eslintrc.js"
   ],
   "**/*": "prettier --write ."
 }

поэтому мы используемESlintпротивts,tsx,js,jsxФайлы в конце кода проверяются на качество кода и используютсяprettierФорматирование кода для всех файлов. Далее мы должны написать для этого коммитаcommit.

Если вы найдете в ИнтернетеbugКогда требуется откат, результатcommitзаписи всеfixили修改代码Подсчитано, что менталитет взрывается при подаче записей.В настоящее время нам нужно стандартизировать нашиGit commitИнформация.

Сначала устанавливаем необходимые библиотеки:

npm i @commitlint/cli @commitlint/config-angular -D

После этого мы создаемcommitlint.config.jsдокумент:

module.exports = { extends: ['@commitlint/config-angular'] };

мы используем напрямуюangularизcommitспецификации, поэтому больше не нужно записывать информацию о конфигурации. Дополнительные сведения о конфигурации см.эта статья.

Наконец, мы только что настроилиpre-commitПосле этого добавьте следующую информацию:

"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      // commit信息
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },

HUSKY_GIT_PARAMSдля насcommitинформация, затемcommitlintобработать эту информациюlint чек об оплате.

Суммировать

Наконец, мы завершили отправку кода, и на данный момент мы завершилиTS + ReactКонфигурация всего проекта работает. Мы завершили нашу идею по смене лодок🚢, нам стоит научиться потом открывать новую лодку, то есть как использовать ее в нашем проектеTS + React Hook.

Категории