JavaScript中使用import 和require打包后實現(xiàn)原理分析

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:17:53

JavaScript中使用import 和require打包后實現(xiàn)原理分析

JavaScript中使用import 和require打包后實現(xiàn)原理分析:前言: 之前使用ES6寫代碼,webpack打包后上線,一點問題沒有,也看過打包后的代碼,長的很亂,也沒敢看看咋回事,加載后就是能運行! 今天通過個例子理解一下打包前,和打包后的代碼! 1.創(chuàng)建文件夾，并在里面創(chuàng)建兩個文件夾,app文件夾和public文件夾，app文

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀JavaScript中使用import 和require打包后實現(xiàn)原理分析:前言: 之前使用ES6寫代碼,webpack打包后上線,一點問題沒有,也看過打包后的代碼,長的很亂,也沒敢看看咋回事,加載后就是能運行! 今天通過個例子理解一下打包前,和打包后的代碼! 1.創(chuàng)建文件夾，并在里面創(chuàng)建兩個文件夾,app文件夾和public文件夾，app文

前言:

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

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

1.創(chuàng)建文件夾，并在里面創(chuàng)建兩個文件夾,app文件夾和public文件夾，app文件夾用來存放原始數(shù)據(jù)和我們將寫的JavaScript模塊，public文件夾用來存放之后供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個 index.html 文件）。接下來我們再創(chuàng)建三個文件:

index.html --放在public文件夾中;

Greeter.js -- 放在app文件夾中;

main.js -- 放在app文件夾中;

此時項目結(jié)構(gòu)如下圖所示

項目結(jié)構(gòu)

我們在 index.html 文件中寫入最基礎(chǔ)的html代碼，它在這里目的在于引入打包后的js文件（這里我們先把之后打包后的js文件命名為 bundle.js ，之后我們還會詳細(xì)講述）。

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

我們在 Greeter.js 中定義一個返回包含問候信息的 html 元素的函數(shù),并依據(jù)CommonJS規(guī)范導(dǎo)出這個函數(shù)為一個模塊：

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

main.js 文件中我們寫入下述代碼，用以把 Greeter模塊返回的節(jié)點插入頁面。

//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('div');
 greet.textContent = "Hi there and greetings!";
 return greet;
 };
 exports.USER_INFO = "userInfo";
})
]);

首先最為層是包裹著立即執(zhí)行函數(shù)(加粗的內(nèi)容),參數(shù)是一個數(shù)組,數(shù)組中每一項是對應(yīng)的模塊,每個模塊包裹在 (function(module, exports, __webpack_require__) {//模塊內(nèi)容 });

立即執(zhí)行函數(shù)運行執(zhí)行 return __webpack_require__(__webpack_require__.s = 0);

也就是執(zhí)行傳入數(shù)組中的第一個模塊main.js

將運行后的每個模塊掛載到installedModules = {}上,當(dāng)下個需要這個模塊直接返回當(dāng)前模塊,不在運行代碼塊了!

接下來將require改為import看看打包后的如何實現(xiàn)

我們將 Greeter.js的信息改為如下：

// Greeter.js
export default function() {
 var greet = document.createElement('div');
 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_0__Greeter_js__ = __webpack_require__(1);
 //main.js
 console.log(__WEBPACK_IMPORTED_MODULE_0__Greeter_js__["a"]);
 document.querySelector("#root").appendChild(Object(__WEBPACK_IMPORTED_MODULE_0__Greeter_js__["b"])());
}),
(function(module, __webpack_exports__, __webpack_require__) {
 "use strict";
 __webpack_exports__["b"] = (function() {
 var greet = document.createElement('div');
 greet.textContent = "Hi there and greetings!";
 return greet;
 });;
 const USER_INFO = "userInfo";
 __webpack_exports__["a"] = USER_INFO;
})]);

總結(jié)

以上所述是小編給大家介紹的JavaScript中使用import 和require打包后實現(xiàn)原理分析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com