이 글은 주로 패키징 후 JavaScript에서 import와 require를 사용하는 원리에 대한 분석을 소개합니다. 필요하신 분들은 참고하시면 됩니다.
서문:
저는 이전에 ES6를 사용하여 코드를 작성했고, webpack으로 패키징했습니다. 그리고 온라인에 갔는데 전혀 문제가 없었어요. 패키지 코드도 봤는데 너무 지저분해서 감히 무슨 일인지 살펴보지도 못했는데 로딩 후에는 실행이 됩니다!
오늘은 제가 해보겠습니다. 예제를 사용하여 사전 패키징된 코드와 사후 패키징된 코드를 이해하세요!
1. 폴더를 만들고 그 안에 앱 폴더와 공용 폴더라는 두 개의 폴더를 만듭니다. 앱 폴더는 원본 데이터와 JavaScript 모듈을 저장하는 데 사용됩니다. 우리는 작성할 것이며, public 폴더는 나중에 브라우저에서 읽을 파일을 저장하는 데 사용됩니다(webpack 패키징을 사용하여 생성된 js 파일 및 index.html 파일 포함). 다음으로 세 개의 파일을 더 만듭니다.
index.html - 공용 폴더에 배치
Greeter.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>
<p id='root'>
</p>
<script src="bundle.js"></script>
</body>
</html>
// Greeter.js
exports.greet= function() {
var greet = document.createElement('p');
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('p');
greet.textContent = "Hi there and greetings!";
return greet;
};
exports.USER_INFO = "userInfo";
})
]);첫 번째 레이어는 즉시 실행 기능을 래핑하는 것입니다(굵은 내용). 매개변수는 배열이고 배열의 각 항목은 해당 모듈이며 각 모듈은 <코드로 래핑됩니다. > (function(module,exports, __webpack_require__) {//Module content});
함수를 즉시 실행 return __webpack_require__(__webpack_require__.s = 0);
즉, 배열의 첫 번째 모듈인 main.js에서 Pass를 실행하고 installedModules = {}까지 실행한 후 각 모듈을 마운트합니다. 다음에 이 모듈이 필요할 때 코드를 실행하지 않고 바로 현재 모듈로 돌아갑니다. .차단됨!(function(module, exports, __webpack_require__) {//模块内容 });
立即执行函数运行执行 return __webpack_require__(__webpack_require__.s = 0);
也就是执行传入数组中的第一个模块main.js
将运行后的每个模块挂载到installedModules = {}
// Greeter.js
export default function() {
var greet = document.createElement('p');
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('p');
greet.textContent = "Hi there and greetings!";
return greet;
});;
const USER_INFO = "userInfo";
__webpack_exports__["a"] = USER_INFO;
})]);위 내용은 JavaScript에서 가져오기 및 요구 사항을 사용하여 패키징 후 원리 분석 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
