這篇文章主要介紹了JavaScript中使用import 和require打包後實現原理分析,需要的朋友可以參考下
前言:
之前使用ES6寫程式,webpack打包後上線,一點問題沒有,也看過打包後的程式碼,長的很亂,也沒敢看看咋回事,加載後就是能運行!
今天透過個例子理解一下打包前,和打包後的程式碼!
#1.建立資料夾，並在裡面建立兩個資料夾,app資料夾和public資料夾，app資料夾用來存放原始資料和我們將寫入的JavaScript模組，public資料夾用來存放之後供瀏覽器讀取的檔案（包括使用webpack打包產生的js檔案以及一個index.html 檔案）。接下來我們再建立三個檔案:
此時專案結構如下圖所示
專案結構
我們在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='root'>
</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_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('p');
greet.textContent = "Hi there and greetings!";
return greet;
});;
const USER_INFO = "userInfo";
__webpack_exports__["a"] = USER_INFO;
})]);登入後複製
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
vue2.0 實作頁面導航提示引導的方法
vue2.0 根據狀態值進行樣式的改變展示方法
使用Vuex實作一個筆記應用的方法
以上是JavaScript中使用import 和require打包後實作原理分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
