溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“JavaScript中怎么使用import和require打包”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JavaScript中怎么使用import和require打包”吧!
項目結構
我們在 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.js
exports.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.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;
})]);到此，相信大家對“JavaScript中怎么使用import和require打包”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
