집 > 기사 > 웹 프론트엔드 > 가져오기를 사용하고 JS 패키징에 필요

가져오기를 사용하고 JS 패키징에 필요

php中世界最好的语言원래의: 2018-03-17 09:59:041778검색

이번에는 JS 패키지 import 및 require 사용 시 주의사항과 JS 패키지 import 및 require 사용 시

주의사항

을 소개하겠습니다. 서문:

예전에는 ES6를 사용하여 코드를 작성했는데, webpack을 패키징해서 온라인에 올렸더니, 패키징된 코드도 전혀 문제가 없었습니다. 무슨 일이 있었는지 감히 볼 수 없었습니다. 로딩 후 실행 가능합니다!

오늘은 패키징 전과 후의 코드를 이해하기 위해 예제를 사용하겠습니다!1. 폴더를 하나 만들고 그 안에 두 개의 폴더를 만듭니다. , app 폴더 및 public 폴더가 사용됩니다. 원본 데이터와 우리가 작성할

JavaScript

프로젝트 구조

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=&#39;root&#39;>
  </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 = {}

즉, 배열의 첫 번째 모듈인 main.js에서 Pass를 실행하고 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;
})]);

믿습니다. 당신은 그것을 읽었습니다. 당신은 이 기사의 방법을 마스터했습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하십시오!