предисловие
Некоторое время назад я самостоятельно изучал React и сначала начал его использовать.creat-react-appДля создания собственного проекта приложение create-react-app после версии 2 уже поддерживает множество функций, таких как sass, макет данных, поддержка typescript и т. д., а также обновляет соответствующие зависимости babel и webpack до последней версии. пожалуйста, обратитесь кСоздать документацию по приложению React на китайском языке, но он скрывает конфигурацию веб-пакета проекта и другой контент. Если вы хотите настроить его самостоятельно, вам нужноnpm run ejectЭто только видно, но для новичка вроде меня достаточно, но в духе метания, я прочитал много статей по настройке в наггетсах, и наконец закинул свой шаблон проекта, если есть какая-то проблема или что-то не так , я надеюсь, что большие ребята смогут вовремя указать и, наконец, получить адрес проекта~
Написана вторая конфигурация рабочей среды разработки:Создайте свою собственную среду React+Typescript (2)
Описание Проекта
Основные зависимости и версии
- webpack4+
- babel8+
- typescript3.7+
- react16.12+
- antd3+
- react-router5+
- eslint6+
Инициализировать проект
- Создайте каталог с именем, которое вам нравится
mkdir react-ts-template cd react-ts-template - Инициализируйте проект, заполните информацию о проекте
yarn init -y 或者 npm init -y
Установить веб-пакет
yarn add webpack -D 或者 npm i webpack -D
yarn add webpack-cli -D 或者 npm i webpack-cli -D
- WebPack также может быть установлен глобально, но будьте осторожны, чтобы настроить путь
- webpack4 извлекает операции, связанные с командной строкой, в webpack-cli, такие как инициализация, миграция, обслуживание и т. д., но они никогда не использовались
После установки создайте новую папку сборки в корневом каталоге и создайте новый файл webpack.common.js для хранения общей конфигурации webpack.
mkdir build
cd build
touch webapck.common.js
Затем просто настройте запись и вывод в webpack.common.js.
const path = require('path');
module.exports={
entry: path.join(__dirname, '../src/index.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, '../dist')
}
}
Затем создайте новую папку src в корневом каталоге для хранения основного кода и создайте новый index.js, чтобы написать что-нибудь небрежно.
console.log('Hello World');
Добавьте скрипт в package.json и запустите его в консолиnpm run build
"scripts": {
"build": "webpack --config build/webpack.common.js"
}
Позже вы обнаружите, что создается папка dist, а также там находится bundle.js, и в консоли будет ошибка.
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
доступно в вебпаке4modeПараметры конфигурации, которые указывают веб-пакету использовать встроенные оптимизации для соответствующего режима, в предупреждении выше говорится, что если режим не указан, веб-пакет будет использоватьproductionмодель. Давайте изменим скрипты.
"scripts": {
"build": "webpack --config build/webpack.common.js --mode production"
}
Такая простая функция упаковки webpack доступна.
Babel
Здесь Babel использует версию 7. Отличием от предыдущей версии является имя пакета при установке зависимостей, таких как babel-core, babel-preset-env, babel-polyfill и т. д. Имена изменены на @babel/core, @ babel/preset-env, @babel/polyfill, сначала установите здесь основной пакет.
yarn add @babel/core @babel/preset-env @babel/preset-react babel-loader -D
Затем создайте новый файл babel.config.js в корневом каталоге.Этот файл конфигурации отличается от .babelrc.js.Согласно официальному веб-сайту, babel.config.js является конфигурацией на уровне проекта.Подробнее см. Официальный сайт.Config Files, добавьте к нему следующее:
module.exports = {
presets: [
'@babel/preset-env',
'@babel/preset-react'
],
plugins: []
}
Измените webpack.common.js, добавьте конфигурацию загрузчика файла js и измените ее позже.
module: {
rules: [{
test: /\.js$/,
use: ['babel-loader'],
include: path.join(__dirname, '../src')
}]
}
React
Следующим шагом является добавление React, что является наиболее важной частью.
yarn add react react-dom
Измените содержимое в src/index.js
import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(<div>Hello React!</div>, document.getElementById('root'));
Затем создайте новую общую папку в корневом каталоге и создайте в ней новый index.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React-TS-Tempalte</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Если вы хотите, чтобы веб-пакет использовал этот html в качестве шаблона, вам также понадобитсяhtml-webpack-pluginплагин, установи егоyarn add html-webpack-plugin -DИ добавьте следующую конфигурацию в webpack.common.js, который также является первым используемым плагином:
const HtmlWebpackPlugin = require('html-webpack-plugin');
...
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'public/index.html',
inject: true
})
]
Давайте упакуем index.html под distth, чтобы увидеть эффект, и успешно показали Hello React.
Конфигурация среды разработки
Следующая установкаwebpack-dev-serverзапустить простой сервер.
yarn add webpack-dev-server -D
Измените webpack.common.config.js и добавьте конфигурацию webpack-dev-server.
devServer: {
host: 'localhost',
port: 3000,
historyApiFallback: true,
overlay: {
//当出现编译器错误或警告时，就在网页上显示一层黑色的背景层和错误信息
errors: true
},
inline: true,
hot: true
}
Далее нужно добавить скрипт в package.json
"scripts": {
"dev": "webpack-dev-server --config build/webpack.common.js --mode development --open"
}
Введите в консолиnpm run dev, ты сможешьhttp://localhost:3000увидеть запуск проекта.
Typescript
Зависимости Typescript добавлены ниже.Основным пакетом зависимостей является typescript, но необходимо установить соответствующие типы: @types/react, @types/react-dom.
yarn add typescript @types/react @types/react-dom -D
Далее нужно заменить предыдущие файлы js, jsx на соответствующие ts, tsx, а также нужен соответствующий загрузчик, можно использоватьts-loaderи ранее установленныйbabel-loader, здесь используется ранее установленныйbabel-loader, добавьте конфигурацию в webpack.common.js:
rules: [
{
test: /\.(j|t)sx?$/,
include: [resolve('../src')],
use: [
{
loader: 'babel-loader'
}
],
// 排除node_modules底下的
exclude: /node_modules/
}
]
Изменить конфигурацию записи веб-пакета
module.exports={
entry: path.join(__dirname, '../src/index.tsx')
}
Не забудьте изменить index.js в src на index.tsx.
Настройте tsconfig.json.Этот файл также является ключевым при использовании ts.Следующая рекомендуемая конфигурация на официальном сайте.
{
"compilerOptions": {
/* Basic Options */
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
"module": "esnext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
"lib": [
"dom",
"dom.iterable",
"esnext"
], /* Specify library files to be included in the compilation. */
"allowJs": true, /* Allow javascript files to be compiled. */
"jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
"sourceMap": true, /* Generates corresponding '.map' file. */
"outDir": "./dist", /* Redirect output structure to the directory. */
"isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
"resolveJsonModule": true,
"forceConsistentCasingInFileNames": true,
"skipLibCheck": true,
"strict": true, /* Enable all strict type-checking options. */
"noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
"noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
"baseUrl": ".", /* Base directory to resolve non-absolute module names. */
"paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
"allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
"experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
},
"include": [
"src"
],
"exclude": [
"node_modules"
]
}
CSS-конфигурация
Здесь нам нужно использоватьstyle-loader,css-loader, сначала установите их
- css-loader позволяет реализовать require() с помощью таких методов, как @import и url(...);
- Загрузчик стилей добавляет на страницу все вычисленные стили; их комбинация позволяет встраивать таблицы стилей в JS-файлы, входящие в комплект webpack.
yarn add style-loader css-loader -D
Затем добавьте соответствующие правила в webpack.common.js.
{
test: /\.css$/, // 正则匹配文件路径
exclude: /node_modules/,
use: [
// 注意loader生效是从下往上的
'style-loader',
'css-loader'
]
}
Затем настройте resolve.extensions в webpack.common.js для автоматического разрешения определенных расширений.
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
}
Создайте новые файлы index.css и App.tsx в корневом каталоге и добавьте их в index.tsx.
// index.css
.app {
background-color: red;
}
// App.tsx
import * as React from 'react'
class App extends React.Component {
render() {
return (
<div className="app">
Hello React
</div>
)
}
}
export default App
// index.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './index.css'
ReactDOM.render(<App />, document.getElementById('root'))
После запуска вы можете увидеть установленный красный фон
Присоединяйтесь к Sass
Если вы хотите использовать синтаксис sass при написании стилей, вам необходимо установить соответствующий загрузчик.
yarn add sass-loader node-sass -D
Примечание. У вас могут возникнуть проблемы с сетью при установке node-sass, и вам необходимо использовать зеркальный источник Taobao.
Правила добавления файлов .scss в webpack.common.js после установки
{
test: /\.scss$/,
include: path.join(__dirname, '../src'), // 只让loader解析我们src底下自己写的文件
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
Затем мы меняем index.css в корневом каталоге на index.scss. Не забудьте изменить суффикс файла, представленный в index.tsx. После запуска проекта обнаруживается, что файл scss может быть успешно проанализирован.
Настройте общедоступные свойства sass
Теперь, когда sass можно использовать для написания более простого кода css, мы также можем записать некоторые часто используемые коды стилей и переменные sass в общедоступные файлы, которые можно напрямую импортировать и использовать при использовании.
Создайте новую папку стилей в каталоге src, а затем создайте новый файл var.scss для хранения переменных стиля. Затем напишите переменную цвета и стиль в файле var.scss:
$red: red;
@mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Затем импортируйте его в файл index.scss прямо сейчас.
@import './styles/var.scss';
.app{
background: $red;
.aps {
width: 50px;
@include ellipsis;
}
}
После такой конфигурации остается проблема с оптимизацией, если нужно ввести var.scss на разных уровнях, то очень хлопотно вводить по относительному пути каждой папки, так может нам нужен только @import var.scss? Шерстяная ткань? Ответ положительный, мы можем оптимизировать путь, настроив атрибут includePaths загрузчика и изменив webpack.common.js.
{
test: /\.scss$/,
include: path.join(__dirname, '../src'),
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
include: resolve('../src'),
options: {
// 这个在最新的scss版本中已经不能用了2020-01-05更新，额其实一两个月前就不能这样写了
// includePaths: [path.join(__dirname, '../src/styles')]
// 应换成下面的
sassOptions: {
includePaths: [path.join(__dirname, '../src/styles')]
}
}
}
]
}
Таким образом, нам нужно только написать имя файла при импорте.
@import 'var.scss';
Присоединяйтесь к PostCSS
Что такое PostCSS? Заимствуя официальные слова:
PostCSS — это инструмент, позволяющий преобразовывать стили с помощью JS-плагинов. Эти плагины могут анализировать ваш CSS, поддерживать CSS-переменные и миксины, компилировать расширенный синтаксис CSS, еще не широко поддерживаемый браузерами, встроенные изображения и многие другие замечательные функции.
Он предоставляет множество часто используемых плагинов
- Расширенный доступ к расширенным функциям CSS
- Автопрефиксер добавляет префикс браузера поставщика, который использует данные из раздела Могу ли я использовать выше.
- postcss-preset-env позволяет вам использовать будущие функции CSS.
- Улучшенная читаемость CSS
- precss включает в себя множество плагинов для поддержки функций, подобных Sass, таких как переменные CSS, вложенность, миксины и т. д.
- изображения и шрифты
- postcss-assets может вставлять размеры изображения и встроенные файлы.
- postcss-sprites может генерировать изображения спрайтов.
... есть еще много, вы можете проверить деталиPostCSS на китайском языке Readme
Здесь мы в основном используем автопрефиксер, сначала устанавливаем postcss-loader
yarn add postcss-loader autoprefixer -D
Затем создайте новый файл postcss.config.js в корневом каталоге и напишите:
module.exports = {
plugins: [
require('autoprefixer')
]
}
Наконец, вам нужно добавить конфигурацию после css-загрузчика связанного со стилями плагина webpack.common.js, в качестве примера возьмем scss.
{
test: /\.scss$/,
include: path.join(__dirname, '../src'),
use: [
'style-loader',
'css-loader',
'postcss-loader', // 加了这一行
{
loader: 'sass-loader',
options: {
includePaths: [path.join(__dirname, '../src/styles')]
}
}
]
}
Просто напишите какой-нибудь стиль, а потом вы сможете найти его в консоли Google, он автоматически добавит его для вас-webkit-приставка.
Обратите внимание, что если вы используетеpostcss-preset-envЕсли это так, он будет установлен автоматическиautoprefixer, и настроить его, вам больше не нужно настраиватьautoprefixer.
const postcssPresetEnv = require('postcss-preset-env');
module.exports = {
plugins: [
postcssPresetEnv(/* pluginOptions */)
]
}
Оптимизация модулей CSS
Модули CSS — это добавление локальной области видимости и зависимостей модулей. Я не добавлял его сюда. Есть решения, которые могут его заменить, например, метод именования с областью действия и bem. Здесь я выбираю метод именования bem. У самородков также есть введение в него , Вы можете пойти и посмотреть.
Загрузка ресурсов, таких как графические шрифты
Сначала установите загрузчик, который обрабатывает такие ресурсы
yarn add url-loader file-loader -D
Затем добавьте соответствующую конфигурацию правила в webpack.common.js.
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
//1024 == 1kb
//小于10kb时打包成base64编码的图片否则单独打包成图片
limit: 10240,
name: path.join('img/[name].[hash:7].[ext]')
}
}]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: [{
loader: 'url-loader',
options: {
limit: 10240,
name: path.join('font/[name].[hash:7].[ext]')
}
}]
}
ESlint
Что касается стандартной проверки машинописного кода, то tslint и eslint необязательны, но в последнее время официальная рекомендация — переходить на eslint, поэтому здесь я использую eslint для установки связанных зависимостей.
yarn add eslint eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser
если не использоватьhookЕсли да, то не носитеeslint-plugin-react-hooksэтот плагин
Создайте новый .eslintrc.js в корневом каталоге и напишите конфигурацию:
module.exports = {
extends: [
"eslint:recommended",
"plugin:react/recommended"
],
parserOptions: {
"ecmaVersion": 2019,
"sourceType": "module"
},
env: {
node: true,
browser: true,
commonjs: true,
es6: true
},
parser: '@typescript-eslint/parser',
plugins: [
"@typescript-eslint",
"react-hooks"
],
globals: {
// 这里填入你的项目需要的全局变量
// 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
// React: false,
// ReactDOM: false
},
settings: {
react: {
pragma: "React",
version: "detect"
}
},
rules: {
// 这里填入你的项目需要的个性化配置，比如：
//
// // @fixable 一个缩进必须用两个空格替代
semi: ['error', 'never'],
'no-console': 'off',
'no-unused-vars': [
'warn',
{
vars: 'all',
args: 'none',
caughtErrors: 'none'
}
],
'max-nested-callbacks': 'off',
'react/no-children-prop': 'off',
'typescript/member-ordering': 'off',
'typescript/member-delimiter-style': 'off',
'react/jsx-indent-props': 'off',
'react/no-did-update-set-state': 'off',
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
indent: [
'off',
2,
{
SwitchCase: 1,
flatTernaryExpressions: true
}
]
}
}
При разработке с помощью VS Code вам также необходимо настроить settings.json.
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
},
]
AntDesign
antd — это библиотека компонентов пользовательского интерфейса семейства Ali. В официальной документации очень четко описано, как ее внедрить и использовать. Давайте сначала настроим ее и установим необходимые зависимости.babel-plugin-importДля импорта по требованию:
yarn add antd
yarn add babel-plugin-import less less-loader -D
Добавьте конфигурацию в babel.config.js
plugins: [
...
['import', {
libraryName: 'antd',
libraryDirectory: 'lib',
style: true
}]
]
Вам также необходимо настроить меньше правил в webpack.common.js.
{
// for ant design
test: /\.less$/,
include: resolve('../node_modules'),
use: [
'style-loader',
'css-loader',
'postcss-loader',
{
loader: 'less-loader',
options: {
lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
modifyVars: theme,
javascriptEnabled: true,
},
}
}
]
}
УведомлениеmodifyVars: themeЭто кастомная тема с официального сайта. Вам нужно создать новую тему.js. Имя этого файла вы определяете сами. Здесь изменены основные цвета, иborder-radius-baseЗначение , а есть множество конфигураций, которые можно посмотреть на официальном сайте.
module.exports = {
'primary-color': 'black',
'border-radius-base': '10px'
}
После этого вы можете с удовольствием использовать его по примеру официального сайта. Однако есть проблема после упаковки, большую часть приходится на icons.js, и здесь используется решение, данное большим парнем на github.
Создайте новый icons.ts в src и напишите только используемые в нем значки.
export { default as DownOutline } from '@ant-design/icons/lib/outline/DownOutline'
Затем настройте псевдоним, здесь будет представлен способ использования псевдонима в ts. в webpack.common.jsresolveДобавьте следующую конфигурацию к элементу, вторая строка связана с иконкой.
alias: {
'@': resolve('../src'),
"@ant-design/icons/lib/dist$": resolve('../src/icons.ts'),
'@components': resolve('../src/components'),
'@img': resolve('../src/assets/img')
}
Вам также необходимо добавить конфигурацию в tsconfig.json:
"paths": {
"@/*": ["src/*"],
"@ant-design/icons/lib/dist$": ["src/icons.js"],
"@components/*": ["src/components/*"],
"@img/*": ["src/assets/img/*"]
}
обновить конфигурацию бабеля
Прежде чем добавлять зависимости, такие как typescript, давайте обновим конфигурацию babel для поддержки функций, которые мы можем использовать позже, таких как динамический импорт декораторов и маршрутов.
yarn add @babel/preset-typescript @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-syntax-dynamic-import -D
Изменить babel.config.js
module.exports = {
presets: [
'@babel/preset-env',
'@babel/preset-typescript',
'@babel/preset-react'
],
plugins: [
['import', {
libraryName: 'antd',
libraryDirectory: 'lib',
style: true
}],
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }],
'@babel/plugin-syntax-dynamic-import'
]
}
React-router
Маршрутизатор использует последнюю версию 5, а затем ленивая загрузка маршрутизатора использует загружаемый в официальном примере.Сначала установите зависимости
yarn add react-router-dom
yarn add @loadable/component @types/loadable__component @types/react-router-dom -D
Используем их в App.tsx
import * as React from 'react'
import { HashRouter as Router, Route, Link } from "react-router-dom"
import loadable from '@loadable/component'
const HomeComponent = loadable(() => import(/* webpackChunkName: "home" */ './views/Home'))
const AboutComponent = loadable(() => import(/* webpackChunkName: "about" */ './views/About'))
class App extends React.Component {
render() {
return (
<div className="app">
<Router>
<ul>
<li>
<Link to="/">To Home</Link>
</li>
<li>
<Link to="/about">To About</Link>
</li>
</ul>
<Route exact path='/' component={HomeComponent}></Route>
<Route path='/about' component={AboutComponent}></Route>
</Router>
<p className="aps">hahahaahhahhahahaha</p>
</div>
)
}
}
export default App
Более
На данный момент базовые функции уже доступны.Далее потребуются некоторые оптимизации и настройка разделенных сред разработки и продакшена.Длина немного велика,и я напишу об этом в следующей статье.
адрес в концеадрес проекта, Если что-то не так, я надеюсь, вы можете указать на это, спасибо.