您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“JavaScript中怎么使用import和require打包”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JavaScript中怎么使用import和require打包”吧!
項(xiàng)目結(jié)構(gòu)
我們?cè)?index.html 文件中寫入最基礎(chǔ)的html代碼,它在這里目的在于引入打包后的js文件(這里我們先把之后打包后的js文件命名為 bundle.js ,之后我們還會(huì)詳細(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>
我們?cè)?Greeter.js 中定義一個(gè)返回包含問候信息的 html 元素的函數(shù),并依據(jù)CommonJS規(guī)范導(dǎo)出這個(gè)函數(shù)為一個(gè)模塊:
// 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é)點(diǎn)插入頁面。
//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ù)是一個(gè)數(shù)組,數(shù)組中每一項(xiàng)是對(duì)應(yīng)的模塊,每個(gè)模塊包裹在 (function(module, exports, __webpack_require__) {//模塊內(nèi)容 });
立即執(zhí)行函數(shù)運(yùn)行執(zhí)行 return __webpack_require__(__webpack_require__.s = 0);
也就是執(zhí)行傳入數(shù)組中的第一個(gè)模塊main.js
將運(yùn)行后的每個(gè)模塊掛載到installedModules = {}
上,當(dāng)下個(gè)需要這個(gè)模塊直接返回當(dāng)前模塊,不在運(yùn)行代碼塊了!
接下來將require改為import看看打包后的如何實(shí)現(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());
然后我們?cè)俅未虬?
(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; })]);
到此,相信大家對(duì)“JavaScript中怎么使用import和require打包”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。