import を使用して JS でパッケージ化を要求する方法

今回はJSでのパッケージ化にimportとrequireを使う方法を紹介します。JSでパッケージ化する際の注意点は何ですか？以下は実際のケースですので見てみましょう。

前書き:

以前は、Webpack をパッケージ化してオンラインに置いた後、コードを書くのにまったく問題はありませんでした。何が起こっているのか見てみましょう。ロード後、実行できました!

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

1. フォルダーを作成し、その中に 2 つのフォルダーを作成します。 、app フォルダーと public フォルダーが使用されます。 app フォルダーは、元のデータとこれから作成する JavaScript モジュールを保存するために使用されます (webpack を使用して生成された js ファイルを含む)。パッケージ化とindex.htmlファイル）。次に、さらに 3 つのファイルを作成します。

• index.html -- パブリック フォルダーに配置します。

• Greeter.js -- アプリ フォルダーに配置します。 app フォルダー;

• プロジェクト構造は以下のとおりです

プロジェクト構造

最も基本的な HTML コードをindex.html ファイルに記述します。ここでの目的は、パッケージ化された js ファイルを導入することです (ここでは最初にパッケージ化された js ファイルに「bundle.js」という名前を付けます。これについては後ほど詳しく説明します)。

<!-- index.html -->
nbsp;html>

 
  <meta>
  <title>sample Project</title>
 
 
  <p>
  </p>
  <script></script>
 

挨拶情報を含む HTML 要素を返す関数を Greeter.js で定義し、この関数を 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, exports, webpack_require) {//Module content});

関数をすぐに実行します return webpack_require(webpack_require.s = 0);

つまり、配列内の最初のモジュール main.js を渡し、installedModules = {} で実行した後、各モジュールをマウントします。次にこのモジュールが必要になると、コードを実行せずに現在のモジュールに直接戻ります。 . Block!(function(module, exports, webpack_require) {//模块内容 });

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

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

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

次に、require を import に変更し、パッケージ化後にどのように実装されるかを確認します

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 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vueリクエストデータの値を変更する方法

selectコンポーネントで指定された値をJQueryが選択する方法

以上がimport を使用して JS でパッケージ化を要求する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。