前言:
之前使用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> <div id='root'> </div> <script src="bundle.js"></script> </body></html>
我們在 Greeter.js 中定義一個返回包含問候信息的 html 元素的函數,并依據CommonJS規范導出這個函數為一個模塊：
// Greeter.jsexports.greet= function() { var greet = document.createElement('div'); 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('div'); 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.jsexport 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;})]);總結
以上所述是小編給大家介紹的JavaScript中使用import 和require打包后實現原理分析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
