> 웹 프론트엔드 > JS 튜토리얼 > JS에서 가져오기를 사용하고 패키징을 요구하는 방법

JS에서 가져오기를 사용하고 패키징을 요구하는 방법

php中世界最好的语言
풀어 주다: 2018-03-28 15:17:57
원래의
2937명이 탐색했습니다.

이번에는 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=&#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);

즉, 배열의 첫 번째 모듈인 main.js에서 Pass를 실행하고 installedModules = {}까지 실행한 후 각 모듈을 마운트합니다. 다음에 이 모듈이 필요할 때 코드를 실행하지 않고 바로 현재 모듈로 돌아갑니다. .Block!(function(module, exports, webpack_require) {//模块内容 });

立即执行函数运行执行  return webpack_require(webpack_require.s = 0);

也就是执行传入数组中的第一个模块main.js

将运行后的每个模块挂载到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 중국어 웹사이트의 다른 관련 글을 주목해 보세요!

추천 자료:

vue 요청 데이터의 값을 수정하는 방법

JQuery가 선택 구성 요소에 지정된 값을 선택하는 방법

위 내용은 JS에서 가져오기를 사용하고 패키징을 요구하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿