JavaScript中使用import 和require打包后实现原理分析

2023-09-15 17:30:05 66

前言:

之前使用ES6写代码,webpack打包后上线,一点问题没有,也看过打包后的代码,长的很乱,也没敢看看咋回事,加载后就是能运行!

今天通过个例子理解一下打包前,和打包后的代码!

1.创建文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来我们再创建三个文件:

index.html--放在public文件夹中;
Greeter.js--放在app文件夹中;
main.js--放在app文件夹中;

此时项目结构如下图所示

项目结构

我们在index.html文件中写入最基础的html代码，它在这里目的在于引入打包后的js文件（这里我们先把之后打包后的js文件命名为bundle.js，之后我们还会详细讲述）。






sampleProject

我们在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块：

//Greeter.js
exports.greet=function(){
vargreet=document.createElement('div');
greet.textContent="Hithereandgreetings!";
returngreet;
};
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){varinstalledModules={};function__webpack_require__(moduleId){
if(installedModules[moduleId]){
returninstalledModules[moduleId].exports;
}
varmodule=installedModules[moduleId]={
i:moduleId,
l:false,
exports:{}
};
modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);
module.l=true;
returnmodule.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){
vargetter=module&&module.__esModule?
functiongetDefault(){
returnmodule['default'];
}:
functiongetModuleExports(){
returnmodule;
};
__webpack_require__.d(getter,'a',getter);
returngetter;
};
__webpack_require__.o=function(object,property){
returnObject.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(){
vargreet=document.createElement('div');
greet.textContent="Hithereandgreetings!";
returngreet;
};
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
exportdefaultfunction(){
vargreet=document.createElement('div');
greet.textContent="Hithereandgreetings!";
returngreet;
};
exportconstUSER_INFO="userInfo";
main.js文件中的代码，修改后
//main.js
importgreet,{USER_INFO}from'./Greeter.js';
console.log(USER_INFO);
document.querySelector("#root").appendChild(greet());

然后我们再次打包:

(function(modules){
varinstalledModules={};
function__webpack_require__(moduleId){
if(installedModules[moduleId]){
returninstalledModules[moduleId].exports;
}
varmodule=installedModules[moduleId]={
i:moduleId,
l:false,
exports:{}
};
modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);
module.l=true;
returnmodule.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){
vargetter=module&&module.__esModule?
functiongetDefault(){
returnmodule['default'];
}:functiongetModuleExports(){
returnmodule;
};
__webpack_require__.d(getter,'a',getter);
returngetter;
};
__webpack_require__.o=function(object,property){
returnObject.prototype.hasOwnProperty.call(object,property);
};
__webpack_require__.p="";
return__webpack_require__(__webpack_require__.s=0);
})([(function(module,__webpack_exports__,__webpack_require__){
"usestrict";
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__){
"usestrict";
__webpack_exports__["b"]=(function(){
vargreet=document.createElement('div');
greet.textContent="Hithereandgreetings!";
returngreet;
});;
constUSER_INFO="userInfo";
__webpack_exports__["a"]=USER_INFO;
})]);

总结

以上所述是小编给大家介绍的JavaScript中使用import和require打包后实现原理分析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

JavaScript中使用import 和require打包后实现原理分析

热门推荐

随机推荐