BabelJS - Lavorare con Babel e JSX
In questo capitolo capiremo come lavorare con JSX e babel. Prima di entrare nei dettagli, cerchiamo di capire cos'è JSX.
Cos'è JSX?
JSX è un codice JavaScript con una combinazione di sintassi xml. Il tag JSX ha il nome del tag, attributi e figli che lo fanno sembrare xml.
React usa JSX per i modelli invece del normale JavaScript. Non è necessario utilizzarlo, tuttavia, di seguito sono riportati alcuni vantaggi che ne derivano.
È più veloce perché esegue l'ottimizzazione durante la compilazione del codice in JavaScript.
È anche indipendente dai tipi e la maggior parte degli errori può essere rilevata durante la compilazione.
Rende più facile e veloce la scrittura di modelli, se si ha familiarità con l'HTML.
Abbiamo usato babel 6 nella configurazione del progetto. Nel caso in cui desideri passare a babel 7, installa i pacchetti richiesti di babel usando@babel/babel-package-name.
Creeremo la configurazione del progetto e utilizzeremo webpack per compilare jsx con la reazione al normale JavaScript usando Babel.
Per avviare la configurazione del progetto, eseguire i comandi forniti di seguito per babel, react e l'installazione di webpack.
comando
npm init
Ora installeremo i pacchetti necessari con cui dobbiamo lavorare - babel, webpack e jsx -
npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
npm install --save-dev react
npm install --save-dev react-dom
Ecco il package.json dopo l'installazione -
Ora creerà un file webpack.config.js, che avrà tutti i dettagli per raggruppare i file js e compilarlo in es5 usando babel.
Per eseguire webpack usando il server, c'è qualcosa chiamato webpack-server. Abbiamo aggiunto il comando chiamato pubblica; questo comando avvierà il webpack-dev-server e aggiornerà il percorso in cui sono archiviati i file finali. In questo momento il percorso che useremo per aggiornare i file finali è la cartella / dev.
Per utilizzare webpack dobbiamo eseguire il seguente comando:
npm run publish
Creeremo il file webpack.config.js file, che hanno i dettagli di configurazione per il funzionamento di webpack.
I dettagli nel file sono i seguenti:
var path = require('path');
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: path.resolve(__dirname, 'dev'),
filename: 'main_bundle.js'
},
mode:'development',
module: {
rules: [
{
test:/\.(js|jsx)$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ['es2015','react']
}
}
]
}
};
La struttura del file è come mostrato sopra. Inizia con il percorso, che fornisce i dettagli del percorso corrente.
var path = require('path'); //gives the current path
Il prossimo è l'oggetto module.exports, che ha proprietà entry, output e module.
L'ingresso è il punto di partenza. Qui dobbiamo fornire i file js principali che vogliamo compilare.
entry: {
app: './src/main.js'
},
path.resolve(_dirname, ‘src/main.js’) - cercherà la cartella src nella directory e main.js in quella cartella.
Produzione
output: {
path: path.resolve(__dirname, 'dev'),
filename: 'main_bundle.js'
},
L'output è un oggetto con dettagli su percorso e nome file. Path manterrà la cartella in cui verrà conservato il file compilato e filename dirà il nome del file finale da utilizzare nel tuo.html file.
modulo
module: {
rules: [
{
test:/\.(js|jsx)$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ['es2015','react']
}
}
]
}
Il modulo è un oggetto con i dettagli delle regole che ha proprietà cioè test, include, loader, query.
Il test conterrà i dettagli di tutti i file js che terminano con .js e .jsx e ha il modello che cercherà .js e .jsx alla fine del punto di ingresso fornito.
Includi indica la cartella da utilizzare per cercare i file.
Loader utilizza babel-loader per la compilazione del codice.
La query ha preimpostazioni di proprietà, che sono array con valore env - es5 o es6 o es7. Abbiamo usato es2015 e reagiamo come preset.
Creare una cartella src/. Inserisci main.js e App.jsx dentro.
App.jsx
import React from 'react';
class App extends React.Component {
render() {
var style = {
color: 'red',
fontSize: 50
};
return (
<div style={style}>
Hello World!!!
</div>
);
}
}
export default App;
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(, document.getElementById('app'));
Eseguire il comando seguente per raggruppare il file .js e convertirlo utilizzando i predefiniti es2015 e react.
comando
npm run pack
Inserisci main_bundle.js dalla cartella dev a index.html -
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "dev/main_bundle.js"></script>
</body>
</html>
comando
npm run publish