BabelJS - Babel ve Webpack ile Çalışma

Webpack, bağımlılıkları olan tüm modülleri - js, stiller, resimler, vb. Statik varlıklar .js, .css, .jpg, .png, vb. İçinde paketleyen bir modül paketleyicidir. Webpack, gerekli biçimde derlemeye yardımcı olan ön ayarlarla birlikte gelir. Örneğin, son çıktıyı react biçiminde, es2015 veya env ön ayarı elde etmeye yardımcı olan react ön ayarı, kodu ES5 veya 6 veya 7'de derlemeye yardımcı olur. Proje kurulumunda babel 6 kullandık. Babel7'ye geçmek isterseniz, @ babel / babel-package-name kullanarak gerekli babel paketlerini kurun.

Burada babel ve webpack kullanarak proje kurulumunu tartışacağız. Visual Studio IDE adlı bir klasör oluşturun ve aynısını açın.

Proje kurulumunu oluşturmak için npm initbabelwebpack'i aşağıdaki gibi çalıştırın -

İşte npm init'ten sonra oluşturulan package.json -

Şimdi babel ve webpack ile çalışmamız için gerekli paketleri kuracağız.

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

İşte kurulumdan sonra Package.json -

Şimdi, js dosyalarını paketlemek için tüm ayrıntıları içeren bir webpack.config.js dosyası oluşturacağız. Bu dosyalar babel kullanılarak es5'e derlenecek.

Sunucu kullanarak web paketini çalıştırmak için web paketi sunucusu kullanıyoruz. Eklenen detaylar aşağıdadır -

Webpack-dev-server'ı başlatacak ve son dosyaların depolandığı yolu güncelleyecek olan yayınlama komutunu ekledik. Şu anda son dosyaları güncellemek için kullanacağımız yol / dev klasörüdür.

Webpack'i kullanmak için aşağıdaki komutu çalıştırmamız gerekiyor -

npm run publish

Öncelikle webpack.config.js dosyalarını oluşturmamız gerekiyor. Bunlar, web paketinin çalışması için yapılandırma ayrıntılarına sahip olacaktır.

Dosyadaki detaylar aşağıdaki gibidir -

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']
            }
         }
      ]
   }
};

Dosyanın yapısı yukarıda gösterildiği gibidir. Geçerli yol ayrıntılarını veren theh yolu ile başlar.

var path = require('path'); //gives the current path

Ardından, input, output ve module özelliklerine sahip olan module.exports nesnesidir. Giriş, başlangıç ​​noktasıdır. Burada derlenmesi gereken ana js dosyalarını vermemiz gerekiyor.

entry: {
   app: './src/main.js'
},

path.resolve(_dirname, ‘src/main.js’) - dizindeki src klasörünü ve bu klasördeki main.js'yi arayacaktır.

Çıktı

output: {
   path: path.resolve(__dirname, 'dev'),
   filename: 'main_bundle.js'
},

Çıktı, yol ve dosya adı ayrıntılarına sahip bir nesnedir. Yol, derlenen dosyanın tutulacağı klasörü tutacak ve dosya adı .html dosyanızda kullanılacak son dosyanın adını söyleyecektir.

modül

module: {
   rules: [
      {
         test: /\.js$/,
         include: path.resolve(__dirname, 'src'),
         loader: 'babel-loader',
         query: {
            presets: ['env']
         }
      }
   ]
}
  • Modül, kuralların ayrıntılarını içeren bir nesnedir. Aşağıdaki özelliklere sahiptir -

    • test
    • include
    • loader
    • query
  • Test , .js ile biten tüm js dosyalarının ayrıntılarını tutacaktır. Verilen giriş noktasının sonunda .js'yi arayacak kalıbı vardır.

  • Dahil et, bakılacak dosyalarda kullanılan klasöre talimat verir.

  • Yükleyici , kodları derlemek için babel yükleyici kullanır.

  • Sorgu , env - es5 veya es6 veya es7 değerine sahip bir dizi olan özellik ön ayarlarına sahiptir.

İçinde src ve main.js klasörü oluşturun ; ES6'da js kodunuzu yazın. Daha sonra, webpack ve babel kullanarak es5'e derlendiğini görmek için komutu çalıştırın.

src/main.js

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

Komutu çalıştırın -

npm run pack

Derlenen dosya aşağıdaki gibi görünür -

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)
}]);

Kod, yukarıda gösterildiği gibi derlenmiştir. Webpack, dahili olarak gerekli olan bazı kodları ekler ve main.js'deki kod en sonunda görülür. Değeri yukarıda gösterildiği gibi teselli ettik.

Son js dosyasını .html dosyasına aşağıdaki gibi ekleyin -

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

Komutu çalıştırın -

npm run publish

Çıktıyı kontrol etmek için dosyayı içinde açabiliriz -

http://localhost:8080/

Konsol değerini yukarıda gösterildiği gibi alıyoruz. Şimdi webpack ve babel kullanarak tek bir dosyada derlemeye çalışalım.

Birden çok js dosyasını tek bir dosyada toplamak için webpack kullanacağız. Babel, es6 kodunu es5'e derlemek için kullanılacaktır.

Şimdi, src / klasöründe 2 js dosyamız var - main.js ve Person.js şu şekilde -

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;
   }
}

Kişi sınıfının ayrıntılarını kullanmak için dışa aktarmayı kullandık.

main.js

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

Main.js'de, Kişi'yi dosya yolundan içe aktardık.

Note- person.js eklemek zorunda değiliz, sadece dosyanın adını eklememiz gerekiyor. Kişi sınıfında bir nesne oluşturduk ve ayrıntıları yukarıda gösterildiği gibi teselli ettik.

Webpack birleştirecek person.js ve main.js ve güncelle dev/main_bundle.jstek bir dosya olarak. Komutu çalıştırınnpm run publish tarayıcıda çıktıyı kontrol etmek için -