検索

ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript はインポートを使用し、パッケージングの例を共有する必要があります

JavaScript はインポートを使用し、パッケージングの例を共有する必要があります

小云云
小云云オリジナル
2018-03-09 09:32:541588ブラウズ

以前は ES6 を使用してコードを作成し、webpack でパッケージ化してオンラインにしましたが、パッケージ化されたコードも非常に煩雑で、何が起こっているのかを見る勇気がありませんでした。この記事では、JavaScript で import と require を使用してパッケージ化後に実装する方法を紹介します。必要な方は参考にしていただければ幸いです。

今日は、パッケージ化する前と後のコードを理解するために例を使用します。

1. フォルダーを作成し、その中にアプリ フォルダーとパブリック フォルダーの 2 つのフォルダーを作成します。アプリ フォルダーは、元のデータを保存するために使用されます。これから作成する JavaScript モジュールでは、パブリック フォルダーは、後でブラウザーによって読み取られるファイル (webpack パッケージ化を使用して生成された js ファイルや、index.html ファイルを含む) を保存するために使用されます。次に、さらに 3 つのファイルを作成します。

  • 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>

挨拶情報を含む HTML 要素を返す関数を Greeter.js で定義し、CommonJS 仕様に従ってこの関数をモジュールとしてエクスポートします。 


// Greeter.js
exports.greet= function() {
 var greet = document.createElement(&#39;p&#39;);
 greet.textContent = "Hi there and greetings!";
 return greet;
};
exports.USER_INFO = "userInfo";

main.js ファイルに次のように記述します。以下のコードは、Greeter モジュールによって返されたノードをページに挿入するために使用されます。 


//main.js 
 let {greeter,USER_INFO} =require(&#39;./Greeter.js&#39;);
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[&#39;default&#39;];
    }:
    function getModuleExports() {
      return module;
    };
    __webpack_require__.d(getter, &#39;a&#39;, 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(&#39;p&#39;);
    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);

つまり、渡された配列の最初のモジュール main.js を実行します(function(module, exports, __webpack_require__) {//模块内容 });

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

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

将运行后的每个模块挂载到installedModules = {}

installedModules = {} で実行した後に各モジュールをマウントし、次にこのモジュールが必要になったときに直接戻ります 現在のモジュールはコード ブロックはもう実行されません

次に、パッケージ化後にどのように実装されるかを確認するために、require をインポートします

Greeter.js の情報を次のように変更します: 


// Greeter.js
export default function() {
 var greet = document.createElement(&#39;p&#39;);
 greet.textContent = "Hi there and greetings!";
 return greet;
};
export const USER_INFO = "userInfo";
main.js 文件中的代码，修改后
//main.js 
import greet,{USER_INFO} from &#39;./Greeter.js&#39;;
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[&#39;default&#39;];
    }: function getModuleExports() {
      return module;
    };
    __webpack_require__.d(getter, &#39;a&#39;, 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(&#39;p&#39;);
    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 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：ブートストラップの折りたたみ可能なグループ化されたサイド ナビゲーション メニューのコード共有次の記事：ブートストラップの折りたたみ可能なグループ化されたサイド ナビゲーション メニューのコード共有

関連記事

続きを見る