首頁 > 文章 > web前端 > JS裡怎麼使用import 和require打包

JS裡怎麼使用import 和require打包

php中世界最好的语言原創: 2018-03-28 15:17:572876瀏覽

這次帶給大家JS裡怎麼使用import 和require打包，JS裡使用import 和require打包的注意事項有哪些，下面就是實戰案例，一起來看一下。

前言:

之前使用ES6寫程式碼,webpack打包後上線,一點問題沒有,也看過打包後的程式碼,長的很亂,也沒敢看看咋回事,加載後就是能運行!

今天透過個例子理解一下打包前,和打包後的代碼!

1.創建文件夾，並在裡面建立兩個資料夾,app資料夾和public資料夾，app資料夾用來存放原始資料和我們將寫的JavaScript模組，public資料夾用來存放之後供瀏覽器讀取的檔案（包括使用webpack打包產生的js檔案以及一個index.html 檔案）。接下來我們再建立三個檔案:

index.html --放在public資料夾中;
Greeter.js --放在app資料夾中;
main.js -- 放在app資料夾中;

此時專案結構如下圖所示

專案結構

我們在index.html 檔案中寫入最基礎的html程式碼，它在這裡目的在於引入打包後的js檔案（這裡我們先把之後打包後的js檔命名為bundle.js ，之後我們還會詳細講述）。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>sample Project</title>
 </head>
 <body>
  <p id=&#39;root&#39;>
  </p>
  <script src="bundle.js"></script>
 </body>
</html>

我們在Greeter.js 中定義一個傳回包含問候資訊的html 元素的函數,並依據CommonJS規範導出這個函數為一個模組：

// Greeter.js
exports.greet= function() {
 var greet = document.createElement('p');
 greet.textContent = "Hi there and greetings!";
 return greet;
};
exports.USER_INFO = "userInfo";

main.js 檔案中我們寫入下述程式碼，用以把Greeter模組回傳的節點插入頁面。

//main.js 
 let {greeter,USER_INFO} =require('./Greeter.js');
console.log(USER_INFO);
document.querySelector("#root").appendChild(greeter());

使用webpack打包後:

(function(modules){     var installedModules = {};  function webpack_require(moduleId) {
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    var module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
    };
    modules[moduleId].call(module.exports, module, module.exports, webpack_require);
    module.l = true;
    return module.exports;
  }
  webpack_require.m = modules;
  webpack_require.c = installedModules;
  webpack_require.d = function(exports, name, getter) {
    if (!webpack_require.o(exports, name)) {
      Object.defineProperty(exports, name, {
        configurable: false,
        enumerable: true,
        get: getter
      });
    }
  };
  webpack_require.n = function(module) {
    var getter = module && module.esModule ?
    function getDefault() {
      return module['default'];
    }:
    function getModuleExports() {
      return module;
    };
    webpack_require.d(getter, 'a', getter);
    return getter;
  };
  webpack_require.o = function(object, property) {
    return Object.prototype.hasOwnProperty.call(object, property);
  };
  webpack_require.p = "";
  return webpack_require(webpack_require.s = 0);
})
(
[
(function(module, exports, webpack_require) {
  //main.js
  let {
    greeter,
    USER_INFO
  } = webpack_require(1);
  console.log(USER_INFO);
  document.querySelector("#root").appendChild(greeter());
}),
(function(module, exports) {
  // Greeter.js
  exports.greet = function() {
    var greet = document.createElement('p');
    greet.textContent = "Hi there and greetings!";
    return greet;
  };
  exports.USER_INFO = "userInfo";
})
]);

首先最為層是包裹著立即執行函數(加粗的內容),參數是一個數組,數組中每一項是對應的模組,每個模組包裹在(function(module, exports, webpack_require) {//模組內容});

立即執行函數執行 return webpack_require(webpack_require.s = 0 );

也就是執行傳入陣列中的第一個模組main.js

#將執行後的每個模組掛載到installedModules = {}上,當下個需要這個模組直接返回當前模組,不在運行程式碼區塊了!

接下來將require改為import看看打包後的如何實現

我們將Greeter. js的資訊改為如下：

// Greeter.js
export default function() {
 var greet = document.createElement('p');
 greet.textContent = "Hi there and greetings!";
 return greet;
};
export const USER_INFO = "userInfo";
main.js 文件中的代码，修改后
//main.js 
import greet,{USER_INFO} from './Greeter.js';
console.log(USER_INFO);
document.querySelector("#root").appendChild(greet());

然後我們再打包:

(function(modules) {
  var installedModules = {};
  function webpack_require(moduleId) {
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    var module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
    };
    modules[moduleId].call(module.exports, module, module.exports, webpack_require);
    module.l = true;
    return module.exports;
  }
  webpack_require.m = modules;
  webpack_require.c = installedModules;
  webpack_require.d = function(exports, name, getter) {
    if (!webpack_require.o(exports, name)) {
      Object.defineProperty(exports, name, {
        configurable: false,
        enumerable: true,
        get: getter
      });
    }
  };
  webpack_require.n = function(module) {
    var getter = module && module.esModule ?
    function getDefault() {
      return module['default'];
    }: function getModuleExports() {
      return module;
    };
    webpack_require.d(getter, 'a', getter);
    return getter;
  };
  webpack_require.o = function(object, property) {
    return Object.prototype.hasOwnProperty.call(object, property);
  };
  webpack_require.p = "";
  return webpack_require(webpack_require.s = 0);
})([(function(module, webpack_exports, webpack_require) {
  "use strict";
  Object.defineProperty(webpack_exports, "esModule", {
    value: true
  });
  var WEBPACK_IMPORTED_MODULE_0Greeter_js = webpack_require(1);
  //main.js
  console.log(WEBPACK_IMPORTED_MODULE_0Greeter_js["a"]);
  document.querySelector("#root").appendChild(Object(WEBPACK_IMPORTED_MODULE_0Greeter_js["b"])());
}),
(function(module, webpack_exports, webpack_require) {
  "use strict";
  webpack_exports["b"] = (function() {
    var greet = document.createElement('p');
    greet.textContent = "Hi there and greetings!";
    return greet;
  });;
  const USER_INFO = "userInfo";
  webpack_exports["a"] = USER_INFO;
})]);

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！