ホームページ > 記事 > ウェブフロントエンド > JavaScript で import と require を使用してパッケージ化後に原理分析を実装する
JavaScript で import と require を使用してパッケージ化後に原理分析を実装する
- 亚连オリジナル
- 2018-05-31 17:37:031974ブラウズ
この記事では、パッケージ化後に JavaScript で import と require を使用する原理の分析を主に紹介します。必要な友人は参照してください。
前書き:
以前は ES6 を使用してコードを記述し、webpack でパッケージ化しました。パッケージ化されたコードも見ましたが、何が起こっているかを見る勇気はありませんでしたが、ロード後に実行できました!
今日はそうします。例を使用して、パッケージ化されたコードとパッケージ化された後のコードを理解してください!
1. フォルダーを作成し、その中にアプリ フォルダーとパブリック フォルダーの 2 つのフォルダーを作成します。アプリ フォルダーは、元のデータと JavaScript モジュールを保存するために使用されます。パブリック フォルダーは、後でブラウザーによって読み取られるファイル (webpack パッケージ化を使用して生成された js ファイルと、index.html ファイルを含む) を保存するために使用されます。次に、さらに 3 つのファイルを作成します。
index.html -- パブリック フォルダーに配置します。
Greeter.js -- アプリ フォルダーに配置します。 app フォルダー;
プロジェクト構造は以下のとおりです
最も基本的な HTML コードをindex.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>
挨拶情報を含む 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 = {} で実行した後、各モジュールをマウントします。次にこのモジュールが必要になると、コードを実行せずに現在のモジュールに直接戻ります。ブロックされました! (function(module, exports, __webpack_require__) {//模块内容 });
立即执行函数运行执行 return __webpack_require__(__webpack_require__.s = 0);
也就是执行传入数组中的第一个模块main.js
将运行后的每个模块挂载到installedModules = {}
// 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_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('p');
greet.textContent = "Hi there and greetings!";
return greet;
});;
const USER_INFO = "userInfo";
__webpack_exports__["a"] = USER_INFO;
})]); 上記は私が行ったものです。皆さんのためにまとめましたので、今後皆さんのお役に立てれば幸いです。 関連記事:
vue2.0 ページナビゲーションプロンプトガイダンスの実装方法
vue2.0 ステータス値に基づいてスタイル表示を変更する方法
以上がJavaScript で import と require を使用してパッケージ化後に原理分析を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。