React
Hoe een eenvoudige webpack, react en babel omgeving in te stellen
Zoeken…
Opmerkingen
Deze build-pijplijn is niet precies wat u "productie-klaar" zou noemen, maar het geeft u een solide start om er de dingen aan toe te voegen die u nodig hebt om de ontwikkelingservaring te krijgen waarnaar u op zoek bent. De aanpak die sommige mensen gebruiken (inclusief mezelf soms) is om een volledig opgebouwde pijplijn van Yeoman.io of ergens anders te nemen en vervolgens de dingen die ze niet willen af te stropen totdat het bij die stijl past. Hier is niets mis mee, maar misschien kunt u met het bovenstaande voorbeeld kiezen voor de tegenovergestelde benadering en opbouwen vanuit kale botten.
Sommige dingen die u misschien wilt toevoegen, zijn dingen als een testkader en dekkingsstatistieken zoals Karma met Mocha of Jasmine. Linting met ESLint. Vervanging van hot modules in webpack-dev-server zodat u die Ctrl + S, F5 ontwikkelervaring kunt opdoen. Ook bouwt de huidige pijplijn alleen in de ontwikkelaarsmodus, dus een productie-opbouwtaak zou goed zijn.
Gotchas!
Merk op dat we in de contexteigenschap van webpack.config.js de knooppuntmodule hebben gebruikt om ons pad te definiëren in plaats van alleen __dirname aan de string /src voegen omdat Windows een hekel heeft aan voorwaartse schuine strepen . Gebruik de leverage node om ons te helpen om de oplossing meer platformonafhankelijk te maken.
Verklaring van eigenschappen van webpack.config.js
context
Dit is het bestandspad dat webpack als rootpad zal gebruiken voor het oplossen van relatieve bestandspaden. Dus in index.jsx waar we gebruik van require('./index.html') die stip daadwerkelijk omgezet naar de src/ directory omdat we het als zodanig in deze eigenschap hebben gedefinieerd.
binnenkomst
Waar webpack eerst kijkt om de oplossing te bundelen. Dit is waarom je zult zien dat in de index.jsx we de oplossing samenvoegen met vereist en geïmporteerd.
uitgang
Hier definiëren we waar webpack de gevonden bestanden moet laten bundelen. We hebben ook een naam gedefinieerd voor het bestand waarin onze gebundelde javascript en stijlen worden verwijderd.
devServer
Dit zijn instellingen die specifiek zijn voor webpack-dev-server. De contentBase definieert waar de server zijn root moet maken, we hebben de dist/ map als onze basis hier gedefinieerd. De port is de poort waarop de server wordt gehost. open is wat wordt gebruikt om webpack-dev-server te instrueren om uw standaardbrowser voor u te openen zodra deze de server heeft opgestart.
module> laders
Dit definieert een toewijzing voor webpack zodat deze weet wat te doen wanneer het verschillende bestanden vindt. De test eigenschap geeft regex voor webpack te gebruiken om te bepalen of het op deze module, in de meeste gevallen we hebben wedstrijden op bestandsextensies moeten gelden. loader of loaders geven de naam van de loaders die we willen gebruiken om het bestand in webpack te laden en die lader te laten zorgen voor de bundeling van dat bestandstype. Er is ook een query eigenschap in javascript, dit levert alleen een query-string op voor de lader, dus we hadden waarschijnlijk ook een query-eigenschap op de html-lader kunnen gebruiken als we dat wilden. Het is gewoon een andere manier om dingen te doen.
Een pijplijn bouwen voor een aangepaste "Hallo wereld" met afbeeldingen.
Stap 1: Installeer Node.js
De build-pipeline die u gaat bouwen, is gebaseerd op Node.js, dus u moet er in eerste instantie voor zorgen dat u deze hebt geïnstalleerd. Voor instructies over het installeren Node.js kunt u de SO docs kassa voor dat hier
Stap 2: Initialiseer uw project als een knooppuntmodule
Open uw projectmap op de opdrachtregel en gebruik de volgende opdracht:
npm init
Voor de doeleinden van dit voorbeeld kunt u gerust de standaardwaarden gebruiken of als u meer informatie wilt over wat dit allemaal betekent, kunt u dit SO-document bekijken over het instellen van de pakketconfiguratie.
Stap 3: Installeer de benodigde npm-pakketten
Voer de volgende opdracht uit op de opdrachtregel om de pakketten te installeren die nodig zijn voor dit voorbeeld:
npm install --save react react-dom
Voer vervolgens voor de dev-afhankelijkheden deze opdracht uit:
npm install --save-dev babel-core babel-preset-react babel-preset-es2015 webpack babel-loader css-loader style-loader file-loader image-webpack-loader
Eindelijk zijn webpack en webpack-dev-server dingen die de moeite waard zijn om wereldwijd te installeren in plaats van als een afhankelijkheid van uw project, als u er de voorkeur aan geeft om het als een afhankelijkheid toe te voegen, dan werkt dat, ik niet. Hier is het uit te voeren commando:
npm install --global webpack webpack-dev-server
Stap 3: Voeg een .babelrc-bestand toe aan de root van uw project
Hiermee wordt babel ingesteld om de voorinstellingen te gebruiken die je zojuist hebt geïnstalleerd. Uw .babelrc-bestand zou er zo uit moeten zien:
{
"presets": ["react", "es2015"]
}
Stap 4: Stel de projectmapstructuur in
Stel een directorystructuur in die eruitziet als hieronder in de hoofdmap van uw directory:
|- node_modules
|- src/
|- components/
|- images/
|- styles/
|- index.html
|- index.jsx
|- .babelrc
|- package.json
OPMERKING: De node_modules , .babelrc en package.json hadden er allemaal al moeten zijn uit eerdere stappen. Ik heb ze net toegevoegd, zodat je kunt zien waar ze passen.
Stap 5: Vul het project in met de projectbestanden van Hello World
Dit is niet echt belangrijk voor het proces van het bouwen van een pijplijn, dus ik geef je de code hiervoor en je kunt ze kopiëren en plakken in:
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
Voel je vrij om dit te vervangen door elke afbeelding die je wilt, het is er gewoon om het punt te bewijzen dat we afbeeldingen ook kunnen bundelen. Als u uw eigen afbeelding opgeeft en deze een andere naam geeft, moet u HelloWorldComponent.jsx bijwerken om uw wijzigingen weer te geven. Evenzeer als u een afbeelding met een andere extensie kiest dan moet je het wijzigen test eigenschap van het beeld loader in de webpack.config.js met de juiste reguliere expressies om uw nieuwe bestandsextensie overeen ..
src / stijlen / 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'));
Stap 6: Maak een webpack-configuratie
Maak een bestand met de naam webpack.config.js in de hoofdmap van uw project en kopieer deze code erin:
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;
Stap 7: Maak npm-taken voor uw pijplijn
Hiertoe moet u twee eigenschappen toevoegen aan de scriptsleutel van de JSON die is gedefinieerd in het bestand package.json in de hoofdmap van uw project. Laat uw scriptsleutel er als volgt uitzien:
"scripts": {
"start": "webpack-dev-server",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
Het test is er al en je kunt kiezen of je het wilt behouden of niet, dit is niet belangrijk voor dit voorbeeld.
Stap 8: Gebruik de pijpleiding
Als u zich vanaf de opdrachtregel in de hoofdmap van het project bevindt, moet u nu de opdracht kunnen uitvoeren:
npm run build
Dit bundelt de kleine applicatie die je hebt gebouwd en plaatst het in de dist/ map die het zal maken in de root van je projectmap.
Als u de opdracht uitvoert:
npm start
Vervolgens wordt de applicatie die u hebt gebouwd weergegeven in uw standaardwebbrowser in een webpack dev-serverinstantie.
