BabelJS - Lavorare con Babel e Webpack

Webpack è un bundler di moduli che racchiude tutti i moduli con dipendenze - js, stili, immagini, ecc. In risorse statiche .js, .css, .jpg, .png, ecc. Webpack viene fornito con preimpostazioni che aiutano per la compilazione nel modulo richiesto. Ad esempio, il preset di reazione che aiuta a ottenere l'output finale in forma di reazione, es2015 o il preset di env che aiuta a compilare il codice in ES5 o 6 o 7, ecc. Abbiamo usato babel 6 nella configurazione del progetto. Se vuoi passare a babel7, installa i pacchetti richiesti di babel usando @ babel / babel-nome-pacchetto.

Qui, discuteremo la configurazione del progetto usando babel e webpack. Crea una cartella chiamata e apri la stessa in Visual Studio IDE.

Per creare la configurazione del progetto, eseguire npm initbabelwebpack come segue:

Ecco il package.json creato dopo npm init -

Adesso installeremo i pacchetti necessari per lavorare con babel e webpack.

npm install --save-dev webpack
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-env

Ecco il Package.json dopo l'installazione -

Ora creeremo un file webpack.config.js, che avrà tutti i dettagli per raggruppare i file js. Questi file verranno compilati in es5 usando babel.

Per eseguire webpack utilizzando il server, utilizziamo webpack-server. Di seguito sono riportati i dettagli aggiunti ad esso:

Abbiamo aggiunto il comando publish che 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

Per prima cosa dobbiamo creare i file webpack.config.js. Questi avranno i dettagli di configurazione per il funzionamento del 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$/,
            include: path.resolve(__dirname, 'src'),
            loader: 'babel-loader',
            query: {
               presets: ['env']
            }
         }
      ]
   }
};

La struttura del file è come mostrato sopra. Inizia con il percorso h, 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 devono essere compilati.

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 conterrà la cartella in cui verrà conservato il file compilato e filename indicherà il nome del file finale da utilizzare nel file .html.

modulo

module: {
   rules: [
      {
         test: /\.js$/,
         include: path.resolve(__dirname, 'src'),
         loader: 'babel-loader',
         query: {
            presets: ['env']
         }
      }
   ]
}

Il modulo è un oggetto con i dettagli delle regole. Ha le seguenti proprietà:

test
include
loader
query

Il test conterrà i dettagli di tutti i file js che terminano con .js. Ha il pattern, che cercherà .js alla fine nel punto di ingresso fornito.
Include indica la cartella in uso sui file da esaminare.
Loader utilizza babel-loader per la compilazione dei codici.
La query ha preimpostazioni di proprietà, che è un array con valore env - es5 o es6 o es7.

Crea la cartella src e main.js al suo interno; scrivi il tuo codice js in ES6. Successivamente, esegui il comando per vederlo compilato su es5 usando webpack e babel.

src/main.js

let add = (a,b) => {
   return a+b;
};
let c = add(10, 20);
console.log(c);

Esegui il comando -

npm run pack

Il file compilato ha il seguente aspetto:

dev/main_bundle.js

!function(e) {
   var t = {};
   function r(n) {
      if(t[n])return t[n].exports;var o = t[n] = {i:n,l:!1,exports:{}};
      return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports
   }
   r.m = e,r.c = t,r.d = function(e,t,n) {
      r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})
   },
   r.r = function(e) {
      "undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})
   },
   r.t = function(e,t) {
      if(1&t&&(e = r(e)),8&t)return e;
      if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;
      var n = Object.create(null);
      if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t) {return e[t]}.bind(null,o));
      return n
   },
   r.n = function(e) {
      var t = e&&e.__esModule?function() {return e.default}:function() {return e};
      return r.d(t,"a",t),t
   },
   r.o = function(e,t) {return Object.prototype.hasOwnProperty.call(e,t)},
   r.p = "",r(r.s = 0)
}([function(e,t,r) {"use strict";var n = function(e,t) {return e+t}(10,20);console.log(n)}]);
!function(e) {
   var t = {};
   function r(n) {
      if(t[n])return t[n].exports;
      var o = t[n] = {i:n,l:!1,exports:{}};
      return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports
   }
   r.m = e,r.c = t,r.d = function(e,t,n) {
      r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})
   },
   r.r = function(e) {
      "undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})
   },
   r.t = function(e,t) {
      if(1&t&&(e=r(e)),
      8&t)return e;
      if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;
      var n = Object.create(null);
      if(
         r.r(n),
         Object.defineProperty(n,"default",{enumerable:!0,value:e}),
         2&t&&"string"!=typeof e
      )
      for(var o in e)r.d(n,o,function(t) {return e[t]}.bind(null,o));
      return n
   },
   r.n = function(e) {
      var t = e&&e.__esModule?function() {return e.default}:function() {return e};
      return r.d(t,"a",t),t
   },
   r.o = function(e,t) {
      return Object.prototype.hasOwnProperty.call(e,t)
   },
   r.p = "",r(r.s = 0)
}([function(e,t,r) {
   "use strict";
   var n = function(e,t) {return e+t}(10,20);
   console.log(n)
}]);

Il codice viene compilato come mostrato sopra. Webpack aggiunge del codice che è richiesto internamente e il codice da main.js viene visualizzato alla fine. Abbiamo consolato il valore come mostrato sopra.

Aggiungi il file js finale nel file .html come segue:

<html>
   <head></head>
   <body>
      <script type="text/javascript" src="dev/main_bundle.js"></script>
   </body>
</html>

Esegui il comando -

npm run publish

Per controllare l'output, possiamo aprire il file in -

http://localhost:8080/

Otteniamo il valore della console come mostrato sopra. Ora proviamo a compilare in un singolo file usando webpack e babel.

Useremo webpack per raggruppare più file js in un unico file. Babel verrà utilizzato per compilare il codice es6 in es5.

Ora abbiamo 2 file js nella cartella src / - main.js e Person.js come segue -

person.js

export class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}

Abbiamo utilizzato export per utilizzare i dettagli della classe Person.

main.js

import {Person} from './person'
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;
console.log(persondet);

In main.js, abbiamo importato Person dal percorso del file.

Note- Non è necessario includere person.js ma solo il nome del file. Abbiamo creato un oggetto della classe Persona e consolato i dettagli come mostrato sopra.

Webpack si combinerà person.js e main.js e aggiorna in dev/main_bundle.jscome un file. Esegui il comandonpm run publish per controllare l'output nel browser -

↰ Previous page Next page ↱

BabelJS - Lavorare con Babel e Webpack

Produzione

modulo

Tutorial BabelJs