이번에는 JS 패키지 import 및 require 사용 시 주의사항과 JS 패키지 import 및 require 사용 시
주의사항을 소개하겠습니다. 서문:
예전에는 ES6를 사용하여 코드를 작성했는데, webpack을 패키징해서 온라인에 올렸더니, 패키징된 코드도 전혀 문제가 없었습니다. 무슨 일이 있었는지 감히 볼 수 없었습니다. 로딩 후 실행 가능합니다!
오늘은 패키징 전과 후의 코드를 이해하기 위해 예제를 사용하겠습니다!1. 폴더를 하나 만들고 그 안에 두 개의 폴더를 만듭니다. , app 폴더 및 public 폴더가 사용됩니다. 원본 데이터와 우리가 작성할
JavaScriptindex.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에서 인사말 정보가 포함된 html 요소를 반환하는 함수를 정의하고 CommonJS 사양에 따라 이 함수를 모듈로 내보냅니다.
// 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);
(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_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; })]);
String.prototype을 사용하는 방법. 형식 문자열 연결 사용
위 내용은 가져오기를 사용하고 JS 패키징에 필요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!