React
Как настроить базовый веб-пакет, реагировать и загружать среду
Поиск…
замечания
Этот конвейер сборки не совсем то, что вы бы назвали «готовым продуктом», но это дает вам твердый старт для вас, чтобы добавить к нему то, что вам нужно, чтобы получить опыт разработки, который вы ищете. Подход, который некоторые люди берут (в том числе и я сам по себе), - это взять полностью построенный трубопровод Yeoman.io или где-то в другом месте, а затем снять с себя то, что им не нужно, пока оно не устраивает стиль. В этом нет ничего плохого, но, возможно, с приведенным выше примером вы могли бы выбрать противоположный подход и сформироваться из голых костей.
Некоторые вещи, которые вы могли бы добавить, - это такие вещи, как структура тестирования и статистика покрытия, такие как карма с моккой или жасмином. Переливание с помощью ESLint. Горячая замена модуля в webpack-dev-сервере, чтобы вы могли получить опыт разработки Ctrl + S, F5. Также текущий конвейер работает только в режиме dev, поэтому задача создания сборки будет хорошей.
Gotchas!
Обратите внимание, что в свойстве контекста webpack.config.js мы использовали модуль пути узла, чтобы определить наш путь, а не просто конкатенировать __dirname в строке /src потому что окна ненавидят перекосы . Поэтому, чтобы сделать решение более совместимым с перекрестными платформами, используйте инструмент рычагов, чтобы помочь нам.
Объяснение свойств webpack.config.js
контекст
Это путь к файлу, для которого webpack будет использовать его как корневой путь для решения относительных путей файлов. Поэтому в index.jsx, где мы используем require('./index.html') эта точка фактически разрешает директорию src/ потому что мы определили ее как таковую в этом свойстве.
запись
Где webpack выглядит сначала, чтобы начать связывать решение. Вот почему вы увидите, что в index.jsx мы сшиваем решение с требованиями и импортом.
выход
Здесь мы определяем, где webpack должен отбрасывать файлы файлов, которые он обнаружил для объединения. Мы также определили имя для файла, в котором наши связанные javascript и стили будут удалены.
devServer
Это настройки, специфичные для webpack-dev-сервера. contentBase определяет, где сервер должен сделать его root, мы определили dist/ folder как нашу базу здесь. port - это порт, на котором будет размещаться сервер. open - это то, что используется, чтобы проинструктировать webpack-dev-сервер, чтобы открыть браузер по умолчанию для вас, как только он развернется на сервере.
модуль> погрузчики
Это определяет сопоставление для использования webpack, так что он знает, что делать, когда он находит разные файлы. Свойство test дает регулярное выражение для использования webpack для определения того, должен ли он применяться к этому модулю, в большинстве случаев мы имеем совпадения с расширениями файлов. loader или loaders дают имя модуля загрузчика, которое мы хотели бы использовать для загрузки файла в webpack, и пусть этот загрузчик позаботится о наборе этого типа файла. В javascript также есть свойство query , это просто предоставляет строку запроса загрузчику, поэтому мы могли бы использовать свойство запроса в html-загрузчике, если хотим. Это просто другой способ сделать что-то.
Как построить конвейер для настроенного «Hello world» с изображениями.
Шаг 1: Установите Node.js
Строка сборки, которую вы собираетесь строить, основана на Node.js, поэтому вы должны убедиться, что в первом случае это установлено. Для получения инструкций по установке Node.js вы можете проверить SO-документы для этого здесь.
Шаг 2. Инициализация вашего проекта как узла
Откройте папку проекта в командной строке и используйте следующую команду:
npm init
Для целей этого примера вы можете свободно принимать значения по умолчанию или если вам нужна дополнительная информация о том, что все это значит, вы можете проверить этот SO-Doc на настройке конфигурации пакета.
Шаг 3: Установите необходимые пакеты npm
Выполните следующую команду в командной строке, чтобы установить пакеты, необходимые для этого примера:
npm install --save react react-dom
Затем для зависимостей dev выполните следующую команду:
npm install --save-dev babel-core babel-preset-react babel-preset-es2015 webpack babel-loader css-loader style-loader file-loader image-webpack-loader
Наконец, webpack и webpack-dev-сервер - это вещи, которые стоит устанавливать во всем мире, а не как зависимость от вашего проекта, если вы предпочтете добавить его в качестве зависимости, то это будет работать, я этого не сделаю. Вот команда запуска:
npm install --global webpack webpack-dev-server
Шаг 3. Добавьте файл .babelrc в корень вашего проекта.
Это позволит настроить babel для использования только что установленных пресетов. Ваш файл .babelrc должен выглядеть следующим образом:
{
"presets": ["react", "es2015"]
}
Шаг 4. Настройка структуры каталога проекта.
Задайте себе структуру каталога, которая выглядит как ниже в корне вашего каталога:
|- node_modules
|- src/
|- components/
|- images/
|- styles/
|- index.html
|- index.jsx
|- .babelrc
|- package.json
ПРИМЕЧАНИЕ. node_modules , .babelrc и package.json должен быть уже с предыдущих шагов, я просто включил их, чтобы вы могли видеть, где они подходят.
Шаг 5: Заполните проект с помощью файлов проекта Hello World
Это не очень важно для процесса построения конвейера, поэтому я просто дам вам код для них, и вы можете скопировать их в:
SRC / компоненты / HelloWorldComponent.jsx
import React, { Component } from 'react';
class HelloWorldComponent extends Component {
constructor(props) {
super(props);
this.state = {name: 'Student'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({name: e.target.value});
}
render() {
return (
<div>
<div className="image-container">
<img src="./images/myImage.gif" />
</div>
<div className="form">
<input type="text" onChange={this.handleChange} />
<div>
My name is {this.state.name} and I'm a clever cloggs because I built a React build pipeline
</div>
</div>
</div>
);
}
}
export default HelloWorldComponent;
SRC / изображения / myImage.gif
Не стесняйтесь подставлять это любым изображением, которое вам нужно просто, чтобы доказать, что мы также можем связать изображения. Если вы предоставите свой собственный образ, и вы назовете его чем-то другим, вам придется обновить HelloWorldComponent.jsx чтобы отразить ваши изменения. Аналогично, если вы выбираете изображение с другим расширением файла, вам необходимо изменить свойство test загрузчика изображений в файле webpack.config.js с соответствующим регулярным выражением, чтобы оно соответствовало вашему новому расширению файла.
ЦСИ / стили / styles.css
.form {
margin: 25px;
padding: 25px;
border: 1px solid #ddd;
background-color: #eaeaea;
border-radius: 10px;
}
.form div {
padding-top: 25px;
}
.image-container {
display: flex;
justify-content: center;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learning to build a react pipeline</title>
</head>
<body>
<div id="content"></div>
<script src="app.js"></script>
</body>
</html>
index.jsx
import React from 'react';
import { render } from 'react-dom';
import HelloWorldComponent from './components/HelloWorldComponent.jsx';
require('./images/myImage.gif');
require('./styles/styles.css');
require('./index.html');
render(<HelloWorldComponent />, document.getElementById('content'));
Шаг 6: Создайте конфигурацию webpack
Создайте файл с именем webpack.config.js в корневом каталоге вашего проекта и скопируйте в него этот код:
webpack.config.js
var path = require('path');
var config = {
context: path.resolve(__dirname + '/src'),
entry: './index.jsx',
output: {
filename: 'app.js',
path: path.resolve(__dirname + '/dist'),
},
devServer: {
contentBase: path.join(__dirname + '/dist'),
port: 3000,
open: true,
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
loader: "style!css"
},
{
test: /\.gif$/,
loaders: [
'file?name=[path][name].[ext]',
'image-webpack',
]
},
{ test: /\.(html)$/,
loader: "file?name=[path][name].[ext]"
}
],
},
};
module.exports = config;
Шаг 7. Создание задач npm для вашего конвейера.
Для этого вам нужно добавить два свойства в скриптовый ключ JSON, определенный в файле package.json в корне вашего проекта. Сделайте свой скрипт таким образом:
"scripts": {
"start": "webpack-dev-server",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
test скрипт уже был там, и вы можете выбрать, сохранять его или нет, это не важно для этого примера.
Шаг 8: Используйте трубопровод
Из командной строки, если вы находитесь в корневом каталоге проекта, вы должны теперь выполнить команду:
npm run build
Это свяжет небольшое приложение, которое вы создали, и поместите его в каталог dist/ который будет создан в корневой папке вашего проекта.
Если вы запустите команду:
npm start
Затем созданное вами приложение будет обслуживаться в вашем веб-браузере по умолчанию внутри экземпляра сервера webpack dev.