Автор оригинала: FreeCodeCamp Community Member.
Ник Карник
Что такое ботистота?
В программировании термин кода котелка относится к блокам кода, используемого снова и снова.
Давайте предположим, что ваш стек развития состоит из нескольких библиотек, таких как Reacties, Babel, Express, Jest, WebPack и т. Д. Когда вы начнете новый проект, вы инициализируете все эти библиотеки и настроите их для работы друг с другом.
С каждым новым проектом, который вы начинаете, вы будете повторяться. Вы также можете представить несоответствия в том, как эти библиотеки создаются в каждом проекте. Это может вызвать путаницу при переключении между проектами.
Это то, где приходят котельные. Котельная – это шаблон, который вы можете клонировать и повторно использовать для каждого проекта.
Модульная экосистема JavaScript упрощает разработку приложений через различные библиотеки, рамки и инструменты. Котлы могут быть непростой, если вы не понимаете основы их базовых компонентов. Давайте узнаем об этих основных строительных блоках при создании наших собственных.
Git Repository: настройка
Создайте папку проекта и инициализируйте Git Repo:
mkdir react-boilerplate && cd react-boilerplategit init
Readme file.
Каждый проект должен содержать посадочную страницу с полезными инструкциями для других разработчиков. Давайте создадим файл readme.md под корнем проекта со следующим содержимым:
# React-BoilerplateThis is my react-boilerplate
## Setupnpm installnpm run buildnpm start
GitHub отображает содержимое файла readme на странице посадки для проекта.
Теперь совершайте вышеупомянутые изменения в Git:
git add .git commit -m "created readme"
В конце каждого раздела вы должны принять свой код в Git.
Структура папки
Создайте следующую структуру папки для вашего проекта:
react-boilerplate |--src |--client |--server
С помощью команды:
mkdir -p src/client src/server
Эта структура папки является базовой и будет развиваться по мере того, как вы интегрируете другие библиотеки в проекте.
Git игнорировать
Как только мы построим наш проект, будут несколько автоматически сгенерированных файлов и папок. Давайте скажем GIT, чтобы игнорировать некоторые из этих файлов, которые мы можем придумать заранее.
Создайте .gitignore под корневой папкой со следующим содержимым:
# Nodenode_modules/
# Webstorm.idea/
# Projectdist/
Комментарии в файле .gitignore префиксированы #.
Узел пакета менеджер
Начальная точка для проекта узла является инициализация своего пакета Manager, который создает файл под названием Package.json. Этот файл должен быть проверен в Git.
Обычно это содержит:
- Описание вашего проекта для NPM
- Список ссылок на все установленные пакеты
- Пользовательские сценарии командной строки
- Конфигурация для установленных пакетов
Перейдите в свой Root Project и введите следующее:
npm init
Заполните все детали, и после того, как вы принимаете их, NPM создаст файл package.json, который выглядит что-то вроде:
{ "name": "react-boilerplate", "version": "1.0.0", "description": "Basic React Boilerplate", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/theoutlander/react-boilerplate.git" }, "keywords": [ "Node", "React" ], "author": "Nick Karnik", "license": "Apache-2.0", "bugs": { "url": "https://github.com/theoutlander/react-boilerplate/issues" }, "homepage": "https://github.com/theoutlander/react-boilerplate#readme"}Статический контент
Давайте создадим статический HTML-файл SRC/Client/index.html со следующим контентом:
React Boilerplate Welcome to React Boilerplate! Express Web Server.
Чтобы обслуживать статический файл выше, нам нужно создать веб-сервер в Expressjs Отказ
npm install express
Я бы порекомендовал последовать следующую конвенцию именования файлов, где имена файлов строчные, и множественные слова разделены точкой. Вы избежите пробуждения проблемы чувствительности к регистру по платформам, а также упростите файлы именования с несколькими словами в более крупных командах.
Создайте файл src/server/web.server.js и добавьте следующий код для проведения веб-сервера через приложение Express и обслуживаете статический HTML-файл:
const express = require('express')export default class WebServer { constructor () { this.app = express() this.app.use(express.static('dist/public')) } start () { return new Promise((resolve, reject) => { try { this.server = this.app.listen(3000, function () { resolve() }) } catch (e) { console.error(e) reject(e) } }) } stop () { return new Promise((resolve, reject) => { try { this.server.close(() => { resolve() }) } catch (e) { console.error(e.message) reject(e) } }) }}Мы создали простой веб-сервер выше с помощью команды запуска и остановки.
Нажмите здесь, чтобы узнать больше о обещаниях Отказ
Запуск файл
Далее нам нужно создать файл индекса, который инициализирует различные компоненты высокого уровня. В нашем примере мы собираемся инициализировать веб-сервер. Однако, поскольку ваш проект растет, вы также можете инициализировать другие компоненты, такие как конфигурация, база данных, регистратор и т. Д.
Создайте файл src/server/index.js со следующим кодом:
import WebServer from './web.server'
let webServer = new WebServer();webServer.start() .then(() => { console.log('Web server started!') }) .catch(err => { console.error(err) console.error('Failed to start web server') });Варить
Чтобы запустить вышеуказанные ES6 код, нам нужно преобразовать его в ES5 Сначала через Бабел. Давайте установим Бабел и Babel-Preset-Env Зависимость, которая поддерживает трансимацию ES2015:
npm i babel-cli babel-preset-env --save-dev
Создайте файл конфигурации Babel называемый .BABELRC под корнем и добавьте его следующие данные:
{ "presets": ["env"]}Предварительная установка ENV неявно включает Babel-Preset-ES2015, Babel-Preset-ES2016 и Babel-Preset-ES2017 вместе, что означает, что вы можете запустить код ES6, ES7 и ES8.
Создание команд
Давайте создадим команды для создания сервера и компонентов клиента проекта и запускают сервер. В разделе Scripts раздел Package.json Снимите строку с помощью команды Test и добавьте следующее:
"scripts": { "build": "npm run build-server && npm run build-client", "build-server": "babel src/server --out-dir ./dist", "build-client": "babel src/client --copy-files --out-dir ./dist/public", "start": "node ./dist/index.js"}Приведенная выше команда Build создаст Dist/Public Folder под корнем. Команда Build-Client просто копирует файл index.html на папку dist/public.
Начиная
Вы можете запустить транспортер Babel в код выше и запустите веб-сервер, используя следующие команды:
npm run buildnpm start
Откройте свой браузер и перейдите к http://localhost: 3000 Отказ Вы должны увидеть вывод вашего статического HTML-файла.
Вы можете остановить веб-сервер, нажав
Тестовый жгут: шума
Я не могу подчеркнуть достаточно важности введения модульных испытаний в начале проекта. Мы собираемся использовать Jest Testing Framework который предназначен для быстрого и разработчика.
Во-первых, нам нужно установить шутку и сохранить его на зависимости от разработки.
npm i jest --save-dev
Агрегатные тесты
Добавим два тестовых случая для запуска и остановки веб-сервера.
Для тестовых файлов вы должны добавить расширение .test.js. Quest сканирует папку SRC для всех файлов, содержащих .test в имени имени файла, вы можете сохранить тестовые случаи в том же папке, что и файлы, которые они тестируют.
Создайте файл под названием SRC/Server/Web.server.test.js и добавьте следующий код:
import WebServer from './web.server'
describe('Started', () => { let webServer = null beforeAll(() => { webServer = new WebServer() }) test('should start and trigger a callback', async () => { let promise = webServer.start() await expect(promise).resolves.toBeUndefined() }) test('should stop and trigger a callback', async () => { let promise = webServer.stop() await expect(promise).resolves.toBeUndefined() })})Команда тестов
Добавим команду NPM для запуска теста в разделе «Сценарии» Package.json. По умолчанию, Jest запускает все файлы со словом .test в их имени файла. Мы хотим ограничить его запущенным тестами под папкой SRC.
"scripts": {... "test": "jest ./src"...}Babel-jest автоматически устанавливается при установке шума и автоматически преобразует файлы, если в вашем проекте существует конфигурация Babel.
Давайте запустим наши тесты через следующую команду:
npm test
Наше приложение настроено для обслуживания статического HTML Файл через Экспресс веб сервер. Мы интегрированы Бабел Чтобы включить ES6 и Jest для модуля тестирования. Давайте перенесем наше внимание на настроек интерфейса.
Настройка реагирования
Установите библиотеки реагирования и реагирования:
npm i react react-dom
Создайте файл под названием SRC/Client/App.js с:
import React, {Component} from 'react'export default class App extends Component { render() { return Welcome to React Boilerplate App }}Давайте сделаем приложение через индекс файла под SRC/Client/index.js с:
import React from 'react'import ReactDOM from 'react-dom'import App from './app'
ReactDOM.render(, document.getElementById('root'))
Реакция
Если вы выполняете NPM Run Build-Client, вы получите ошибку, потому что мы не сказали Babel, как обрабатывать RECT/JSX.
Давайте исправить это, установив Babel-Preset-React Зависимость:
npm install --save-dev babel-preset-react
Нам также необходимо изменить файл конфигурации .babelrc для включения реагирования трансистации:
{ "presets": ["env", "react"]}Теперь, когда вы запустите NPM Run Build-Client, он создаст App.js и index.js по Dist/Public с Code ES6, транспортированный на ES5.
Сценарий нагрузки в HTML
Чтобы подключить наше приложение RACT в файл HTML, нам нужно загрузить index.js в нашем файле index.html. Не забудьте опустошить текст узема #Root, поскольку приложение React будет установлено на него:
React Boilerplate Запустить сервер
Если вы зажигаете свой веб-сервер и перейдите в http://localhost: 3000 , вы увидите пустую страницу с ошибкой в консоли.
Uncaught ShareError: Требуется не определен.
Это потому, что Бабел – это просто транспортер. Для поддержки динамически загрузки модулей нам нужно будет установить WebPack.
Начните, изменив команды сборки под скриптами в Package.json в babel:
"scripts": { "build-babel": "npm run build-babel-server && npm run build-babel-client", "build-babel-server": "babel src/server --out-dir ./dist", "build-babel-client": "babel src/client --copy-files --out-dir ./dist/public", "start": "node ./dist/index.js", "test": "jest ./src" }WebPack.
WebPack позволяет нам легко модулировать наш код и соединить его в один файл JavaScript. Он поддерживается многочисленными плагинами, а шансы состоят в том, что есть плагин для почти любой задачи по сборке, о которой вы можете подумать. Начните с установки WebPack:
npm i webpack@^3
По умолчанию WebPack ищет файл конфигурации, называемый webpack.config.js, поэтому давайте создадим его в корневой папке и определим два точка входа, один для веб-приложения, а другой – для веб-сервера. Давайте создадим два объекта конфигурации и экспортируйте их как коллекцию:
const client = { entry: { 'client': './src/client/index.js' }};const server = { entry: { 'server': './src/server/index.js' }};module.exports = [client, server];
Теперь давайте уточним, где у вас будет выводит веб-пакет и установить цель Создать так, чтобы он игнорирует собственные модули узлов, таких как «FS» и «путь» от вложения. Для клиента мы установим его в Интернет, а для сервера мы установим его в узле.
let path = require('path');const client = { entry: { 'client': './src/client/index.js' }, target: 'web', output: { filename: '[name].js', path: path.resolve(__dirname, 'dist/public') }};const server = { entry: { 'server': './src/server/index.js' }, target: 'node', output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') }};module.exports = [client, server];
Babel Loader
Прежде чем мы сможем запустить WebPack, нам нужно настроить его для обработки кода ES6 и JSX. Это делается через погрузчики. Давайте начнем с установки Babel-Loader :
npm install babel-loader --save-dev
Нам нужно изменить конфигурацию WebPack, чтобы включить Babel-loader для запуска по всем файлам .js. Мы создадим общий объект, определяющий раздел модуля, который мы можем повторно использовать для обеих целей.
const path = require('path');const moduleObj = { loaders: [ { test: /\.js$/, exclude: /node_modules/, loaders: ["babel-loader"], } ],};const client = { entry: { 'client': './src/client/index.js', }, target: 'web', output: { filename: '[name].js', path: path.resolve(__dirname, 'dist/public') }, module: moduleObj};const server = { entry: { 'server': './src/server/index.js' }, target: 'node', output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') }, module: moduleObj}module.exports = [client, server];
Для объединения вложенных общих объектов я бы порекомендовал проверить WebPack Merge модуль.
Исключая файлы
WebPack будет распущена ссылочные библиотеки, что означает все, что включено из Node_Modules, будет упакована. Нам не нужно подключить внешний код, так как эти пакеты обычно заминированы, и они также будут увеличивать время и размер сборки.
Давайте настроим WebPack, чтобы исключить все пакеты в папке Node_Modules. Это легко выполняется через Узел-узел-внешние Модуль:
npm i webpack-node-externals --save-dev
Сопровождается настройкой WebPack.config.js, чтобы использовать его:
let path = require('path');let nodeExternals = require('webpack-node-externals');const moduleObj = { loaders: [ { test: /\.js$/, exclude: /node_modules/, loaders: ["babel-loader"], } ],};const client = { entry: { 'client': './src/client/index.js', }, target: 'web', output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') }, module: moduleObj};const server = { entry: { 'server': './src/server/index.js' }, target: 'node', output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') }, module: moduleObj, externals: [nodeExternals()]}module.exports = [client, server];
Обновить команду сборки
Наконец, нам нужно вносить изменения в раздел сценариев в Package.json, чтобы включить команду сборки, которая использует WebPack, и переименовать index.js на server.js для NPM начать как это то, что WebPack настроен на вывод.
"scripts": { "build": "webpack", "build-babel": "npm run build-babel-server && npm run build-babel-client", "build-babel-server": "babel src/server --out-dir ./dist", "build-babel-client": "babel src/client --copy-files --out-dir ./dist/public", "start": "node ./dist/server.js", "test": "jest ./src" }Построить чистоту
Давайте добавим команду для очистки наших папок DIST и Node_Modules, чтобы мы могли сделать чистую сборку и убедиться, что наш проект все еще работает, как и ожидалось. Прежде чем мы сможем сделать это, нам нужно установить пакет под названием Римраф (который является RM -RFCommand).
npm install rimraf
Секция сценариев теперь должна содержать:
"scripts": {..."clean": "rimraf dist node_modules",...}Чистая сборка с помощью WebPack
Теперь вы можете успешно чистить и построить свой проект, используя WebPack:
npm run cleannpm installnpm run build
Это создаст dist/server.js и dist/public/client.js под корневой папкой.
HTML WebPack Plugin
Однако вы, возможно, заметили, что index.html отсутствует. Это связано с тем, что ранее мы попросили Babel копировать файлы, которые не были транспортированы. Тем не менее, WebPack не способен сделать это, поэтому нам нужно использовать HTML WebPack Plugin Отказ
Установите плагин HTML WebPack:
npm i html-webpack-plugin --save-dev
Нам нужно включить плагин в верхней части файла конфигурации WebPack:
const HtmlWebPackPlugin = require('html-webpack-plugin')Далее нам нужно добавить ключ плагинов на конфигурацию клиента:
const client = { entry: { 'client': './src/client/index.js' }, target: 'web', output: { filename: '[name].js', path: path.resolve(__dirname, 'dist/public') }, module: moduleObj, plugins: [ new HtmlWebPackPlugin({ template: 'src/client/index.html' }) ]}Прежде чем создать проект, давайте изменим наш HTML-файл и удалите ссылку на скрипт index.js, поскольку вышеупомянутый плагин добавит это для нас. Это особенно полезно, когда есть один или несколько файлов с динамическими именами файлов (например, когда файлы генерируются с уникальным временным отметкой для Cache Busting).
React Boilerplate Давайте восстановим проект:
npm run cleannpm installnpm run build
И убедитесь, что наши существующие тесты все еще работают:
npm test
Мы дополнительно обновили BoaterPlate для интеграции React и WebPack, создали дополнительные команды NPM, динамически ссылаются index.js в HTML-файле и экспортировали его.
Настройка фермента
Прежде чем добавить тест на реагирование, нам нужно интегрировать Фермент , что позволит нам утверждать, манипулировать и проходить компоненты реагирования.
Начнем с установки фермента и фермента-адаптера-реагирования-16, что требуется для соединения фермента к проекту, используя React V16 и выше.
npm i --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
Создайте файл SRC/ENZYME.Setup.js со следующим контентом:
import Enzyme from 'enzyme'import Adapter from 'enzyme-adapter-react-16'
Enzyme.configure({ adapter: new Adapter()})Нам нужно настроить Jest использовать SRC/ENZYME.SETUP.JS в Package.json, добавив следующий раздел под корневым объектом:
{..."jest": { "setupTestFrameworkScriptFile": "./src/enzyme.setup.js" }...}Тест на компонент реагирования
Давайте проверим компонент приложения и убедитесь, что он оказывает ожидаемый текст. Кроме того, мы сделаем снимок этого компонента, чтобы мы могли гарантировать, что его структура не изменилась с каждым прогоном теста.
Нажмите здесь, чтобы узнать больше о тестировании снимков Отказ
Создайте тестовый случай под SRC/CLIENC/APP.TEST.JS со следующим содержанием:
import App from './app'import React from 'react'import {shallow} from 'enzyme'describe('App', () => { test('should match snapshot', () => { const wrapper = shallow( expect(wrapper.find('div').text()).toBe('Welcome to React Boilerplate App') expect(wrapper).toMatchSnapshot() })})Если мы запустим этот тест сейчас, он пройдет с предупреждением:
Давайте починить, что, установив полифилл под названием Раф :
npm i --saveDev raf
И изменение конфигурации шума под Package.json до:
{..."jest": { "setupTestFrameworkScriptFile": "./src/enzyme.setup.js", "setupFiles": ["raf/polyfill"] }...}Теперь вы можете убедиться, что все наши тесты проходят:
npm test
После запуска теста React вы заметите новый файл в SRC/Client/Snapshots/app.test.js.snap. Он содержит сериализованную структуру нашего компонента реагирования. Он должен быть проверен в Git, чтобы его можно было использовать для сравнения с динамически сгенерированным моментальным снижением во время прогона теста.
Окончательный пробег
Давайте начнем веб-сервер еще раз и перейти к http://localhost: 3000 Чтобы все работает:
npm start
Я надеюсь, что эта статья дала вам представление о упрочнении процесса начала нового проекта с нуля с Express | Реагировать |. Jest |. WebPack |. Варить Хорошей идеей создать свою собственную многоразовую ботинку, чтобы вы понимаете, что происходит под капотом, и в то же время получают голову при создании новых проектов.
Мы едва поцарапали поверхность, и есть много места для улучшения, чтобы сделать эту доставку ботина.
Вот некоторые вещи для вас, чтобы попробовать:
- Включить Cache Busting в WebPack
- CSS-файл пакет с использованием CSS-погрузчик в WebPack
- Включить Исходные карты в WebPack
- Добавить Команды отладки в package.json.
- Замена горячего модуля
- Автозагрузка веб-сервера, когда изменения обнаружены через узел
Если вы хотели бы узнать больше о экосистеме RACT ECOSYSTEM, я бы очень рекомендовал принять Полный курс реагирования веб-разработчика По Эндрю Мид Отказ