BabelJS - 使用Babel和Webpack

Webpack是一個模組打包器，它將所有依賴模組（js、樣式、圖片等）打包成靜態資源（.js、.css、.jpg、.png等）。Webpack帶有預設，有助於編譯成所需的形式。例如，react預設有助於獲得react形式的最終輸出，es2015或env預設有助於將程式碼編譯成ES5或ES6或ES7等。我們在專案設定中使用了babel 6。如果您想切換到babel 7，請使用@babel/babel-package-name安裝babel所需的包。

在這裡，我們將討論使用babel和webpack的專案設定。建立一個名為的資料夾，並在Visual Studio IDE中開啟它。

要建立專案設定，請執行npm init babelwebpack，如下所示：

這是npm init建立後的package.json：

現在，我們將安裝使用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檔案的所有細節。這些檔案將使用babel編譯成es5。

要使用伺服器執行webpack，我們使用webpack-server。以下是新增到其中的詳細資訊：

我們添加了publish命令，它將啟動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']
            }
         }
      ]
   }
};

檔案的結構如上所示。它以path開頭，提供當前路徑的詳細資訊。

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

接下來是module.exports物件，它具有entry、output和module屬性。entry是起點。在這裡，我們需要提供要編譯的主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'
},

output是一個包含path和filename詳細資訊的物件。path將儲存編譯檔案所在的資料夾，filename將告訴在您的.html檔案中使用的最終檔名。

模組

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

module是一個包含規則詳細資訊的物件。它具有以下屬性：

test
include
loader
query

test將儲存所有以.js結尾的js檔案的詳細資訊。它具有模式，將在給定的入口點中查詢結尾處的.js。
include指示要檢視的檔案使用的資料夾。
loader使用babel-loader編譯程式碼。
query具有屬性presets，它是一個值為env – es5或es6或es7的陣列。

建立資料夾src和main.js；在其中編寫您的ES6 js程式碼。稍後，執行命令檢視它如何使用webpack和babel編譯成es5。

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

要檢查輸出，我們可以在以下位置開啟檔案：

https://:8080/

我們得到如上所示的控制檯值。現在讓我們嘗試使用webpack和babel將程式碼編譯成單個檔案。

我們將使用webpack將多個js檔案捆綁到一個檔案中。Babel將用於將es6程式碼編譯為es5。

現在，我們在src/資料夾中有兩個js檔案 - 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;
   }
}

我們使用export來使用Person類的詳細資訊。

main.js

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

在main.js中，我們從檔案路徑匯入了Person。

注意 - 我們不必包含person.js，只需包含檔名即可。我們建立了一個Person類的物件，並像上面那樣控制檯輸出了詳細資訊。

Webpack將合併person.js和main.js，並將其更新為dev/main_bundle.js作為單個檔案。執行命令npm run publish以在瀏覽器中檢查輸出：

列印頁面