Babel
Babel può trasformare la sintassi JSX in sintassi JS, inoltre è in grado di convertire la sintassi ES6 Harmony in ES5 Vanilla.
Babel è utilizzato come loader nel workflow di WebPack. Da questo momento in poi Babel sostituisce React-tools in tutti gli esempi.
Babel in azione con WebPack
Creare una nuova cartella di progetto. Creare la cartella /src per i sorgenti e la cartella /dist per i file di produzione.
Istallare i seguenti pacchetti.
npm install webpack
npm install react
npm install babel
Inizializzare un file di progetto npm con il seguente comando
npm init
E' possibile rispondere alle domande con il valore di default premendo invio. Alla fine dell'operazione è presente un file package.json.
I file javascript utilizzano la nuova sintassi ES6 che Babel loader si preoccupa di convertire in ES5 per tutti i browser che non ne hanno il supporto.
Creare il file main.js all'interno di /src/app
import React from 'react';
import Hello from '../components/hello'; // relativo to main.js
main();
function main() {
React.render(<Hello />, document.getElementById('app'));
}
Creare il file hello.js all'interno di /src/components
import React from 'react';
export default class Hello extends React.Component {
// Classe ES6
render() {
return <h1>Hello world!</h1>;
}
}
Creare il file index.html all'interno di /dist
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
Creare un file webpack.config.js nella cartella di progetto e valorizzarlo.
// contenuto del file webpack.config.js
var path = require('path');
var config = {
entry: path.resolve(__dirname, 'src/app/main.js'), // file principale per la risoluzione delle dipendenze
output: {
path: path.resolve(__dirname, 'dist'), // cartella destinazione
filename: 'bundle.js' // nome file di destinazione
},
module: {
loaders: [
{test: /\.jsx?$/, loader: 'babel'} // I file con estensione js oppure jsx sono processati da babel-loader
]
},
resolve: {
extensions: ['', '.js', '.jsx'] // di default i file .jsx non sono risolti da webpack, per questo motivo ho specificato l'estensione .jsx
}
};
module.exports = config;
Lanciare WebPack con il comando webpack.
All'interno della cartella /dist viene creato un file bundle.js che è il nostro static asset creato da WebPack.
Il file index.html può essere visualizzato con un browser.