React
Hur man ställer in en grundläggande webbpack, reagerar och babel miljö
Sök…
Anmärkningar
Denna build-pipeline är inte exakt vad du skulle kalla "produktionsklar" men det ger en solid start för dig att lägga till de saker du behöver för att få den utvecklingsupplevelse du letar efter. Den metod som vissa människor tar (inklusive mig själv ibland) är att ta en helt uppbyggd pipeline av Yeoman.io eller någon annanstans och sedan ta bort de saker de inte vill förrän det passar där stil. Det finns inget fel med det här, men kanske med exemplet ovan kan du välja det motsatta tillvägagångssättet och bygga upp från bara ben.
Några saker du kanske vill lägga till är saker som en testram och täckningsstatistik som Karma med Mocha eller Jasmine. Foder med ESLint. Ersättning av het modul i webpack-dev-server så att du kan få den Ctrl + S, F5 utvecklingsupplevelsen. Även den nuvarande pipeline bygger bara i dev-läge så att en produktionsuppbyggnadsuppgift skulle vara bra.
Gotchas!
Lägg märke till i kontextegenskapen för webpack.config.js vi har använt modulen för __dirname för att definiera vår sökväg snarare än att bara sammanfoga __dirname till strängen /src detta beror på att windows hatar framåt snedstreck . Så för att göra lösningen mer kompatibel med plattformar använder du hävstångsnoden för att hjälpa oss.
Förklaring av webpack.config.js-egenskaper
sammanhang
Detta är filvägen som webpack kommer att använda som sin root-bana för att lösa relativa filvägar. Så i index.jsx där vi använder require('./index.html') den punkten faktiskt löser sig till src/ katalogen eftersom vi har definierat den som sådan i den här egenskapen.
inträde
Där webpack ser först ut för att börja samla lösningen. Det är därför du ser att vi i index.jsx sy ihop lösningen med krav och import.
produktion
Det är här vi definierar var webpack ska släppa filfilerna som den har hittat att buntas. Vi har också definierat ett namn för filen där vårt bundna javascript och stilar kommer att släppas.
devServer
Dessa är inställningar specifika för webpack-dev-server. contentBase definierar var servern ska göra sin rot, vi har definierat dist/ mappen som vår bas här. port är den port som servern kommer att vara värd för. open är det som används för att instruera webpack-dev-server att öppna din standardwebbläsare för dig när den har spunnit upp servern.
modul> lastare
Detta definierar en kartläggning för webbpakke att använda så att den vet vad man ska göra när den hittar olika filer. Den test egenskapen ger regex för Webpack att använda för att avgöra om det bör gälla denna modul, i de flesta fall vi har matcher på filtillägg. loader eller loaders anger namnet på den laddningsmodul som vi vill använda för att ladda filen i webpack och låta den lastaren ta hand om paket av den filtypen. Det finns också en query i javascript, detta ger bara en frågesträng till laddaren, så vi kunde förmodligen ha använt en frågaegenskap i html-laddaren också om vi ville. Det är bara ett annat sätt att göra saker.
Hur man bygger en pipeline för en anpassad "Hello world" med bilder.
Steg 1: Installera Node.js
Byggledningen som du bygger är baserad i Node.js så du måste i första hand se till att du har detta installerat. För instruktioner om hur du installerar Node.js kan du kolla in SO-dokumenten för det här
Steg 2: Initiera ditt projekt som en nodmodul
Öppna din projektmapp på kommandoraden och använd följande kommando:
npm init
I det här exemplet kan du gärna ta standardinställningarna eller om du vill ha mer information om vad allt detta betyder kan du kolla in detta SO-dokument när du ställer in paketkonfiguration.
Steg 3: Installera nödvändiga npm-paket
Kör följande kommando på kommandoraden för att installera de paket som krävs för detta exempel:
npm install --save react react-dom
Kör sedan kommandot för dev-beroenden:
npm install --save-dev babel-core babel-preset-react babel-preset-es2015 webpack babel-loader css-loader style-loader file-loader image-webpack-loader
Slutligen är webpack och webpack-dev-server saker som är värda att installera globalt snarare än som ett beroende av ditt projekt, om du föredrar att lägga till det som ett beroende så kommer det att fungera, det gör jag inte. Här är kommandot att köra:
npm install --global webpack webpack-dev-server
Steg 3: Lägg till en .babelrc-fil till roten till ditt projekt
Detta kommer att installera babeln för att använda de förinställningar du just har installerat. Din .babelrc-fil ska se ut så här:
{
"presets": ["react", "es2015"]
}
Steg 4: Konfigurera projektkatalogstrukturen
Ställ in en katalogstruktur som ser ut som nedan i roten till din katalog:
|- node_modules
|- src/
|- components/
|- images/
|- styles/
|- index.html
|- index.jsx
|- .babelrc
|- package.json
OBS: node_modules , .babelrc och package.json borde alla ha varit där från tidigare steg. Jag har bara inkluderat dem så att du kan se var de passar.
Steg 5: Populera projektet med Hello World-projektfilerna
Detta är inte riktigt viktigt för att bygga en pipeline så jag ska bara ge dig koden för dessa och du kan kopiera klistra in dem i:
src / komponenter / 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
Känn dig fri att ersätta detta med alla bilder du vill att det bara är där för att bevisa att vi också kan binda in bilder. Om du tillhandahåller din egen bild och namnger det något annorlunda måste du uppdatera HelloWorldComponent.jsx att återspegla dina ändringar. Lika om du väljer en bild med en annan filändelse måste du ändra test egenskap av bilden lastaren i webpack.config.js med lämplig regex att matcha din nya filändelsen ..
src / stilar / 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'));
Steg 6: Skapa webbpackskonfiguration
Skapa en fil som heter webpack.config.js i roten till ditt projekt och kopiera den här koden till den:
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;
Steg 7: Skapa npm-uppgifter för din pipeline
För att göra detta måste du lägga till två egenskaper till skriptnyckeln för JSON som definieras i package.json-filen i roten till ditt projekt. Få skriptnyckeln att se ut så här:
"scripts": {
"start": "webpack-dev-server",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
test har redan funnits och du kan välja om du vill behålla det eller inte, det är inte viktigt för det här exemplet.
Steg 8: Använd rörledningen
Från kommandoraden, om du är i projektrotkatalogen, bör du nu kunna köra kommandot:
npm run build
Detta kommer att samla den lilla applikationen du har byggt och placera den i dist/ katalogen som den kommer att skapa i roten till din projektmapp.
Om du kör kommandot:
npm start
Då kommer applikationen du har byggt upp att serveras i din standardwebbläsare i en webbpack-dev-instans.