BabelJS - ทำงานร่วมกับ Babel และ Webpack

Webpack เป็นโมดูลบันเดิลที่รวมโมดูลทั้งหมดที่มีการอ้างอิง - js, สไตล์, รูปภาพและอื่น ๆ ลงในเนื้อหาแบบคงที่. js, .css, .jpg, .png เป็นต้น Webpack มาพร้อมกับค่าที่ตั้งล่วงหน้าซึ่งช่วยในการคอมไพล์ในรูปแบบที่ต้องการ ตัวอย่างเช่น react preset ที่ช่วยให้ได้ผลลัพธ์สุดท้ายในรูปแบบ react, es2015 หรือ env preset ที่ช่วยในการคอมไพล์โค้ดใน ES5 หรือ 6 หรือ 7 เป็นต้นเราได้ใช้ babel 6 ในการตั้งค่าโปรเจ็กต์ ในกรณีที่คุณต้องการเปลี่ยนไปใช้ babel7 ให้ติดตั้งแพ็คเกจที่จำเป็นของ babel โดยใช้ @ babel / babel-package-name

ในที่นี้เราจะพูดถึงการตั้งค่าโครงการโดยใช้ babel และ webpack สร้างโฟลเดอร์ที่เรียกและเปิดเหมือนกันใน Visual Studio IDE

ในการสร้างการตั้งค่าโปรเจ็กต์ให้รัน npm initbabelwebpack ดังนี้ -

นี่คือ package.json ที่สร้างขึ้นหลังจาก npm init -

ตอนนี้เราจะติดตั้งแพ็คเกจที่จำเป็นเพื่อใช้กับ babel และ 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

นี่คือ Package.json หลังการติดตั้ง -

ตอนนี้เราจะสร้างไฟล์ webpack.config.js ซึ่งจะมีรายละเอียดทั้งหมดในการรวมไฟล์ js ไฟล์เหล่านี้จะถูกคอมไพล์เป็น es5 โดยใช้ babel

ในการเรียกใช้ webpack โดยใช้เซิร์ฟเวอร์เราใช้ webpack-server ต่อไปนี้เป็นรายละเอียดที่เพิ่มเข้ามา -

เราได้เพิ่มคำสั่งเผยแพร่ซึ่งจะเริ่มต้น webpack-dev-server และจะอัปเดตเส้นทางที่เก็บไฟล์สุดท้าย ตอนนี้เส้นทางที่เราจะใช้เพื่ออัปเดตไฟล์สุดท้ายคือโฟลเดอร์ / dev

ในการใช้ webpack เราต้องเรียกใช้คำสั่งต่อไปนี้ -

npm run publish

ก่อนอื่นเราต้องสร้างไฟล์ webpack.config.js สิ่งเหล่านี้จะมีรายละเอียดการกำหนดค่าสำหรับ webpack ในการทำงาน

รายละเอียดในไฟล์มีดังนี้ -

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

โครงสร้างของไฟล์เป็นดังที่แสดงด้านบน เริ่มต้นด้วยเส้นทางซึ่งให้รายละเอียดเส้นทางปัจจุบัน

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

ถัดไปคืออ็อบเจ็กต์ module.exports ซึ่งมีรายการคุณสมบัติเอาต์พุตและโมดูล ทางเข้าคือจุดเริ่มต้น ที่นี่เราต้องให้ไฟล์ js หลักที่ต้องคอมไพล์

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

path.resolve(_dirname, ‘src/main.js’) - จะค้นหาโฟลเดอร์ src ในไดเร็กทอรีและ main.js ในโฟลเดอร์นั้น

เอาต์พุต

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

เอาต์พุตคืออ็อบเจ็กต์ที่มีรายละเอียดพา ธ และชื่อไฟล์ Path จะเก็บโฟลเดอร์ที่จะเก็บไฟล์ที่คอมไพล์ไว้และชื่อไฟล์จะบอกชื่อไฟล์สุดท้ายที่จะใช้ในไฟล์. html ของคุณ

โมดูล

module: {
   rules: [
      {
         test: /\.js$/,
         include: path.resolve(__dirname, 'src'),
         loader: 'babel-loader',
         query: {
            presets: ['env']
         }
      }
   ]
}
  • โมดูลคือวัตถุที่มีรายละเอียดของกฎ มีคุณสมบัติดังต่อไปนี้ -

    • test
    • include
    • loader
    • query
  • การทดสอบจะเก็บรายละเอียดของไฟล์ js ทั้งหมดที่ลงท้ายด้วย. js มีรูปแบบซึ่งจะมองหา. js ต่อท้ายในจุดเข้าที่กำหนด

  • รวมคำสั่งให้ดูโฟลเดอร์ที่ใช้กับไฟล์

  • Loaderใช้ babel-loader ในการรวบรวมรหัส

  • แบบสอบถามมีคุณสมบัติที่ตั้งไว้ล่วงหน้าซึ่งเป็นอาร์เรย์ที่มีค่า env - es5 หรือ es6 หรือ es7

สร้างโฟลเดอร์ src และmain.jsในนั้น เขียนรหัส js ของคุณใน ES6 ต่อมาให้รันคำสั่งเพื่อดูว่าคอมไพล์เป็น es5 โดยใช้ webpack และ babel

src/main.js

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

เรียกใช้คำสั่ง -

npm run pack

ไฟล์ที่คอมไพล์มีลักษณะดังนี้ -

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

มีการรวบรวมโค้ดดังที่แสดงไว้ด้านบน Webpack เพิ่มโค้ดบางส่วนที่จำเป็นภายในและโค้ดจาก main.js จะปรากฏในตอนท้าย เราได้ปลอบใจค่าดังที่แสดงด้านบน

เพิ่มไฟล์ js สุดท้ายในไฟล์. html ดังนี้ -

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

เรียกใช้คำสั่ง -

npm run publish

ในการตรวจสอบผลลัพธ์เราสามารถเปิดไฟล์ใน -

http://localhost:8080/

เราได้รับค่าคอนโซลตามที่แสดงด้านบน ตอนนี้ให้เราพยายามรวบรวมเป็นไฟล์เดียวโดยใช้ webpack และ babel

เราจะใช้ webpack เพื่อรวมไฟล์ js หลาย ๆ ไฟล์ไว้ในไฟล์เดียว Babel จะใช้เพื่อรวบรวมรหัส es6 เป็น es5

ตอนนี้เรามีไฟล์ js 2 ไฟล์ในโฟลเดอร์ src / - main.js และ Person.js ดังนี้ -

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

เราได้ใช้การส่งออกเพื่อใช้รายละเอียดของคลาสบุคคล

main.js

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

ใน main.js เราได้นำเข้า Person จากเส้นทางไฟล์

Note- เราไม่จำเป็นต้องใส่ person.js แต่แค่ชื่อไฟล์ เราได้สร้างออบเจ็กต์ของคลาส Person และปลอบใจในรายละเอียดดังที่แสดงด้านบน

Webpack จะรวม person.js และ main.js และอัปเดตใน dev/main_bundle.jsเป็นไฟล์เดียว รันคำสั่งnpm run publish เพื่อตรวจสอบผลลัพธ์ในเบราว์เซอร์ -