이번에는 JS에서 import와 require를 사용하여 패키징하는 방법을 보여드리겠습니다. JS에서 import와 require를 사용하여 패키징할 때 주의사항은 무엇인지 살펴보겠습니다.
서문:
예전에는 ES6를 사용하여 코드를 작성했는데, webpack을 패키징해서 온라인에 올렸더니, 패키징된 코드도 전혀 문제가 없었습니다. 무슨 일이 있었는지 감히 볼 수 없었습니다. 로딩 후 실행 가능합니다!
오늘은 패키징 전과 후의 코드를 이해하기 위해 예제를 사용하겠습니다!
1. 폴더를 하나 만들고 그 안에 두 개의 폴더를 만듭니다. , app 폴더 및 public 폴더가 사용됩니다. 원본 데이터와 우리가 작성할 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, imports, webpack_require) {//모듈 내용});
함수 즉시 실행 return webpack_require(webpack_require.s = 0);
즉, 배열의 첫 번째 모듈인 main.js에서 Pass를 실행하고 installedModules = {}까지 실행한 후 각 모듈을 마운트합니다. 다음에 이 모듈이 필요할 때 코드를 실행하지 않고 바로 현재 모듈로 돌아갑니다. .Block!(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_0Greeter_js = webpack_require(1);
//main.js
console.log(WEBPACK_IMPORTED_MODULE_0Greeter_js["a"]);
document.querySelector("#root").appendChild(Object(WEBPACK_IMPORTED_MODULE_0Greeter_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;
})]);JQuery가 선택 구성 요소에 지정된 값을 선택하는 방법
위 내용은 JS에서 가져오기를 사용하고 패키징을 요구하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
