125 lines
9.0 KiB
Markdown
125 lines
9.0 KiB
Markdown
|
---
|
|||
|
|
title: Writing Code for Your Es6 React with Webpack Project
|
|||
|
|
localeTitle: Написание кода для вашего Es6 React with Webpack Project
|
|||
|
|
---
|
|||
|
|
## расстояние / index.html
|
|||
|
|
|
|||
|
|
Теперь мы можем открыть наш `dist/index.html` . Это будет одна страница HTML, которая загружает все наше приложение. Нам не нужно много кода для этого файла, достаточно:
|
|||
|
|
|
|||
|
|
* Установите элемент для React DOM в `src/js/client.js` .
|
|||
|
|
* Ссылка на наш связанный файл JavaScript (который еще не существует).
|
|||
|
|
|
|||
|
|
Таким образом, наш файл `dist/index.html` будет выглядеть так:
|
|||
|
|
```
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>React Webpack Example</title>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- React app will be injected into the following `div` element: -->
|
|||
|
|
<div id="app"></div>
|
|||
|
|
<!-- Include bundled JavaScript: -->
|
|||
|
|
<script src="bundle.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Возможно, вам интересно, почему эта страница ссылается на `bundle.js` когда все, что у нас есть, это пустой `src/js/client.js` . Это будет показано позже, когда мы напишем наш конфигурационный файл Webpack.
|
|||
|
|
|
|||
|
|
## SRC / JS / client.js
|
|||
|
|
|
|||
|
|
Теперь пришло время написать код React. Так же, как в файле `dist/index.html` , на данный момент мы напишем достаточно кода, чтобы получить приложение, поэтому совсем не потребуется кода:
|
|||
|
|
```
|
|||
|
|
import React from 'react';
|
|||
|
|
import ReactDOM from 'react-dom';
|
|||
|
|
|
|||
|
|
class Main extends React.Component {
|
|||
|
|
render() {
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<h1>This is one cool app!</h1>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const app = document.getElementById('app');
|
|||
|
|
ReactDOM.render(<Main />, app);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Код, который выглядит как элементы HTML, на самом деле является JSX, который является частью React.
|
|||
|
|
|
|||
|
|
* [Справка: Подробнее о JSX](http://buildwithreact.com/tutorial/jsx)
|
|||
|
|
|
|||
|
|
Чтобы объяснить, что происходит в этом файле, мы сломаем его:
|
|||
|
|
|
|||
|
|
* Во-первых, мы импортируем `React` и `ReactDOM` . Они необходимы для любого файла React, который используется для ввода кода в DOM. `ReactDOM` - это виртуальный DOM, и это не то же самое, что стандартная Document Object Model.
|
|||
|
|
|
|||
|
|
* [Справка: Подробнее о React DOM](https://facebook.github.io/react/docs/glossary.html)
|
|||
|
|
|
|||
|
|
* Затем мы создаем класс React. Классы были добавлены в JavaScript в ES6. Таким образом, это метод ES6 для записи класса React, но, конечно же, [мы можем написать его и в ES5](https://toddmotto.com/react-create-class-versus-component/) .
|
|||
|
|
* [Справка: Подробнее о классах ES6](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
|
|||
|
|
|
|||
|
|
|
|||
|
|
Каждый класс React имеет метод `render` . В этом случае метод `render` `return` элемент `div` JSX. Это то, что мы увидим во всем файле React. Класс может содержать другие методы, которые должны отображаться перед методом `render` , который всегда идет в нижней части класса.
|
|||
|
|
|
|||
|
|
* Наконец, мы связываем React с нашим `index.html` . Мы установили `app` как место, где мы хотим, чтобы наш код React был введен. И, наконец, используя ReactDOM, мы вставляем компонент, который мы написали, `<Main />` , в приложение, которое в этом случае является `div` с `id` `app` .
|
|||
|
|
|
|||
|
|
## webpack.config.js
|
|||
|
|
|
|||
|
|
Остается еще один файл, который нужно написать, прежде чем наш проект будет готов. Это файл конфигурации Webpack. Сначала файлы `webpack.config.js` могут сбивать с толку, но часто они не так сложны, как кажется.
|
|||
|
|
|
|||
|
|
В этом случае, в своем самом основном, `webpack.config.js` экспортирует объект, который обладает следующими свойствами:
|
|||
|
|
|
|||
|
|
| Недвижимость | Роль |
|
|||
|
|
| --- | --- |
|
|||
|
|
| вход | Что входит: точка входа в приложение. В этом случае это `src/js/client.js` . |
|
|||
|
|
| выход | Что выходит: что Webpack собирается расслоить для нас. В этом случае это то, что мы `webpack.config.js` в `webpack.config.js` . |
|
|||
|
|
| погрузчики | Задачи, которые Webpack собирается выполнить. |
|
|||
|
|
|
|||
|
|
Вот как `webpack.config.js` файл `webpack.config.js` :
|
|||
|
|
```
|
|||
|
|
var path = require('path');
|
|||
|
|
var srcPath = path.join(__dirname, 'src');
|
|||
|
|
var buildPath = path.join(__dirname, 'dist');
|
|||
|
|
|
|||
|
|
module.exports = {
|
|||
|
|
context: srcPath,
|
|||
|
|
entry: path.join(srcPath, 'js', 'client.js'),
|
|||
|
|
output: {
|
|||
|
|
path: buildPath,
|
|||
|
|
filename: "bundle.js"
|
|||
|
|
},
|
|||
|
|
module: {
|
|||
|
|
loaders: <a href='https://en.wikipedia.org/wiki/Don%27t_repeat_yourself' target='_blank' rel='nofollow'>
|
|||
|
|
{
|
|||
|
|
test: /\.jsx?$/,
|
|||
|
|
exclude: /(node_modules|bower_components)/,
|
|||
|
|
loader: 'babel',
|
|||
|
|
query: {
|
|||
|
|
presets: ['react', 'es2015']
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Опять же, давайте разложим его так, чтобы было ясно, что делает этот файл:
|
|||
|
|
|
|||
|
|
* Во-первых, нам нужен модуль `path` NodeJS, чтобы мы могли обрабатывать пути к файлам, необходимые для установки `context` объекта. Очень важно использовать этот модуль, а не пытаться и конкатенировать каталоги со строками, потому что для этого требуются некоторые операционные системы, такие как Windows.
|
|||
|
|
|
|||
|
|
* Затем мы указываем `srcPath` и `buildPath` используя необходимый нам `path` . Выполнение этого гарантирует, что у нас \[СУШЕНЫЙ, читаемый код.
|
|||
|
|
|
|||
|
|
* Настало время написать объект. Свойства, которые мы собираемся использовать, имеют отношение к Webpack.
|
|||
|
|
|
|||
|
|
* Сначала мы предоставляем контекст, который просто указывает, где находится наше приложение. Это относится к переменной `context` которую мы только что создали.
|
|||
|
|
* Затем мы указываем точку входа, которая, конечно же, представляет собой приложение React, которое мы написали ранее ( `src/js/client.js` ).
|
|||
|
|
* Затем мы укажем имя связанного файла, который Webpack создает при его запуске. В этом случае это `dist/bundle.js` . Звучит знакомо? Это должно быть сделано, потому что это файл, с которым мы связываемся с нашим `dist/index.html` !
|
|||
|
|
* Наконец, появляется свойство `module` , которое содержит массив, `loaders` , который в настоящее время содержит один объект. Свойства этого объекта сообщают Webpack, какие файлы JavaScript записываются с ES6 и React, так что его загрузчик, `babel` может работать соответственно при `webpack.config.js` . Это в основном шаблонный код, который мы можем увидеть на [странице readme на Babel Loader](https://github.com/babel/babel-loader) .
|
|||
|
|
|
|||
|
|
Если `webpack.config.js` запутывает сейчас, не волнуйтесь, если вы понимаете, что он должен делать.
|
|||
|
|
|
|||
|
|
* [Справка: Подробнее о создании файла конфигурации Webpack](https://webpack.github.io/docs/tutorials/getting-started/#config-file)
|