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

Produzione