예전에는 ES6를 사용해서 코드를 작성했는데, webpack으로 패키징해서 온라인에 갔는데 전혀 문제가 없었어요. 로딩 후 실행한 글입니다. JavaScript로 import와 require를 사용하여 패키징한 뒤, 필요한 친구들이 참고하시면 좋겠습니다.
오늘은 패키징 전후의 코드를 이해하기 위해 예를 들어 보겠습니다!
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
let {greeter,USER_INFO} =require('./Greeter.js');
console.log(USER_INFO);
document.querySelector("#root").appendChild(greeter());(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);</code ></p><p>즉, 전달된 배열에서 첫 번째 모듈 main.js를 실행합니다<code>(function(module, exports, __webpack_require__) {//模块内容 });
立即执行函数运行执行 return __webpack_require__(__webpack_require__.s = 0);
也就是执行传入数组中的第一个模块main.js
将运行后的每个模块挂载到installedModules = {}
installedModules = {}에서 실행한 후 각 모듈을 마운트하고 다음에 이 모듈이 필요할 때 직접 반환합니다. 현재 모듈은 다음과 같습니다. 더 이상 코드 블록을 실행하지 않습니다! 다음으로 가져오기 요구 사항을 변경하여 패키징 후 어떻게 구현되는지 확인합니다. Greeter.js 정보를 다음과 같이 변경합니다. // 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의 import와 require의 차이점을 비교하세요
JavaScript의 require, import,export 예시 공유
JavaScript의 require, import,export에 대한 자세한 설명
🎜위 내용은 JavaScript는 가져오기를 사용하며 공유하려면 패키징 예제가 필요합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
