React
Jak skonfigurować podstawowe środowisko webpack, reagować i babelować
Szukaj…
Uwagi
Ten potok kompilacji nie jest dokładnie tym, co nazwałbyś „gotowym do produkcji”, ale daje ci solidne podstawy do dodania do niego rzeczy, których potrzebujesz, aby uzyskać doświadczenie programistyczne, którego szukasz. Podejście, które niektórzy ludzie przyjmują (czasami czasami ja), polega na wzięciu w pełni rozbudowanego potoku Yeoman.io lub gdzieś indziej, a następnie rozebraniu rzeczy, których nie chcą, dopóki nie będzie to pasować do stylu. Nie ma w tym nic złego, ale być może w powyższym przykładzie możesz wybrać przeciwne podejście i zbudować z nagich kości.
Niektóre rzeczy, które możesz chcieć dodać, to np. Środowisko testowe i statystyki zasięgu, takie jak Karma z Mocha lub Jasmine. Szarpie z ESLint. Wymiana modułu na gorąco w webpack-dev-server, dzięki czemu można uzyskać doświadczenie programistyczne Ctrl + S, F5. Również bieżący potok buduje tylko w trybie deweloperskim, więc zadanie kompilacji produkcyjnej byłoby dobre.
Gotchas!
Zauważ, że we właściwości kontekstu webpack.config.js użyliśmy modułu ścieżki węzła, aby zdefiniować naszą ścieżkę, a nie tylko konkatenację __dirname do ciągu /src ponieważ system Windows nienawidzi cięć w przód . Aby uczynić to rozwiązanie bardziej kompatybilnym z wieloma platformami, skorzystaj z węzła dźwigni, aby nam pomóc.
Objaśnienie właściwości pliku webpack.config.js
kontekst
Jest to ścieżka do pliku, dla której webpack będzie używał jako ścieżki katalogu głównego do rozwiązywania względnych ścieżek plików. Tak więc w index.jsx, w którym używamy require('./index.html') ta kropka faktycznie przenosi się do katalogu src/ ponieważ tak zdefiniowaliśmy to w tej właściwości.
wejście
Tam, gdzie webpack wygląda na pierwszy, zaczyna wiązać rozwiązanie. Dlatego zobaczysz, że w pliku index.jsx łączymy rozwiązanie z wymaganiami i importami.
wynik
W tym miejscu określamy, gdzie webpack powinien upuszczać pliki, które znalazł w pakiecie. Zdefiniowaliśmy również nazwę pliku, w którym zostanie usunięty nasz pakiet javascript i style.
devServer
Są to ustawienia specyficzne dla serwera webpack-dev-server. contentBase określa miejsce, w którym serwer powinien być rootem, tutaj zdefiniowaliśmy folder dist/ jako naszą bazę. port to port, na którym serwer będzie hostowany. open służy do instruowania webpack-dev-server, aby otworzył dla ciebie twoją domyślną przeglądarkę po uruchomieniu serwera.
moduł> ładowarki
Definiuje to mapowanie do użycia przez webpack, dzięki czemu będzie wiedział, co zrobić, gdy znajdzie różne pliki. Właściwość test daje wyrażenie regularne dla pakietu WWW do określenia, czy powinien zastosować ten moduł, w większości przypadków dopasowujemy rozszerzenia plików. loader lub loaders należy podać nazwę modułu ładującego że chcielibyśmy użyć, aby załadować plik do WebPack i pozwól, że ładowarka dbać o powiązanie tego typu plików. W javascript znajduje się również właściwość query , która po prostu zapewnia ciąg zapytania do modułu ładującego, więc prawdopodobnie moglibyśmy również użyć właściwości zapytania w module ładującym HTML, gdybyśmy chcieli. To po prostu inny sposób robienia rzeczy.
Jak zbudować potok dla dostosowanego „Hello world” z obrazami.
Krok 1: Zainstaluj Node.js
Potok kompilacji, który będziesz budował, jest oparty na Node.js, więc najpierw musisz upewnić się, że masz go zainstalowaną. Aby uzyskać instrukcje na temat instalowania Node.js, możesz sprawdzić tutaj dokumenty SO
Krok 2: Zainicjuj swój projekt jako moduł węzła
Otwórz folder projektu w wierszu polecenia i użyj następującego polecenia:
npm init
Na potrzeby tego przykładu możesz przyjąć wartości domyślne lub jeśli chcesz uzyskać więcej informacji o tym, co to wszystko oznacza, możesz zapoznać się z tym dokumentem SO o konfiguracji konfiguracji pakietu.
Krok 3: Zainstaluj niezbędne pakiety npm
Uruchom następujące polecenie w wierszu polecenia, aby zainstalować pakiety niezbędne w tym przykładzie:
npm install --save react react-dom
Następnie dla zależności dev uruchom polecenie:
npm install --save-dev babel-core babel-preset-react babel-preset-es2015 webpack babel-loader css-loader style-loader file-loader image-webpack-loader
Wreszcie webpack i webpack-dev-server są rzeczami, które warto instalować globalnie, a nie jako zależność twojego projektu, jeśli wolisz dodać go jako zależność, to zadziała, ja nie. Oto polecenie do uruchomienia:
npm install --global webpack webpack-dev-server
Krok 3: Dodaj plik .babelrc do katalogu głównego projektu
Spowoduje to skonfigurowanie babel do korzystania z właśnie zainstalowanych ustawień. Twój plik .babelrc powinien wyglądać następująco:
{
"presets": ["react", "es2015"]
}
Krok 4: Skonfiguruj strukturę katalogu projektu
Skonfiguruj strukturę katalogów, która wygląda jak poniżej w katalogu głównym:
|- node_modules
|- src/
|- components/
|- images/
|- styles/
|- index.html
|- index.jsx
|- .babelrc
|- package.json
UWAGA: node_modules , .babelrc i package.json powinny już istnieć w poprzednich krokach, które właśnie zamieściłem, abyś mógł zobaczyć, gdzie pasują.
Krok 5: wypełnij projekt plikami projektu Hello World
Nie jest to tak naprawdę ważne w procesie budowania potoku, więc dam ci po prostu kod do nich i możesz je skopiować i wkleić:
src / components / 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 / images / myImage.gif
Zastąp to dowolnym obrazem, który chcesz, aby po prostu udowodnić, że możemy również łączyć obrazy. Jeśli podasz własny obraz i nazwiesz go inaczej, musisz zaktualizować HelloWorldComponent.jsx aby odzwierciedlić zmiany. Podobnie jeśli wybierzesz obraz z innym rozszerzeniem pliku, musisz zmodyfikować właściwość test modułu ładującego obraz w pliku webpack.config.js za pomocą odpowiedniego wyrażenia regularnego w celu dopasowania do nowego rozszerzenia pliku.
src / styles / 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'));
Krok 6: Utwórz konfigurację pakietu internetowego
Utwórz plik o nazwie webpack.config.js w katalogu głównym projektu i skopiuj do niego ten kod:
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;
Krok 7: Utwórz zadania npm dla swojego potoku
Aby to zrobić, musisz dodać dwie właściwości do klucza skryptu JSON zdefiniowanego w pliku package.json w katalogu głównym projektu. Spraw, by klucz twoich skryptów wyglądał tak:
"scripts": {
"start": "webpack-dev-server",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
Skrypt test już tam był i możesz wybrać, czy chcesz go zachować, czy nie, w tym przykładzie nie jest ważne.
Krok 8: Użyj potoku
Z poziomu wiersza poleceń, jeśli jesteś w katalogu głównym projektu, powinieneś być teraz w stanie uruchomić polecenie:
npm run build
Spowoduje to spakowanie małej aplikacji, którą zbudowałeś i umieszczenie jej w katalogu dist/ , który utworzy w katalogu głównym twojego projektu.
Jeśli uruchomisz polecenie:
npm start
Następnie aplikacja, którą zbudujesz, będzie obsługiwana w domyślnej przeglądarce wewnątrz instancji serwera webpack.