JavaScript中使用import 和require打包后实现原理分析
前言:
之前使用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 ,之后我们还会详细讲述)。
<!-- 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打包后实现原理分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【Python】文件的选择性压缩和全压缩,一般人不告诉的实用小技巧!
- 搭建hadoop集群虚拟机试验环境
- PLSQL-简单的语句块及变量的定义
- Python 技术篇-使用PIL库等比例压缩、缩小图片
- linux 安装并配置zsh
- 听音乐不过瘾?自制一个音乐播放器!【附带函数源码】
- Python 技术篇-3行代码实现Gif动画生成,Gif动画素材获取方法
- Linux 文件隐藏权限
- 还在用print()查找错误?日志消息这顿排骨它不香嘛?
- CNS图表复现02—Seurat标准流程之聚类分群
- Python 技术篇-莉莉机器人api调用方法,实例演示。免费的机器人
- Hugo Travis 完结!
- 【Python】秀儿!两行代码制作你的专属动态二维码
- Windows 技术篇-网卡物理(MAC)地址查看方法
- Go使用工厂方法实例结构体