ホームページ > 記事 > ウェブフロントエンド > import と require を使用して JS をパッケージ化する
import と require を使用して JS をパッケージ化する
- php中世界最好的语言オリジナル
- 2018-03-17 09:59:041772ブラウズ
今回は、JSをパッケージ化する際のimportとrequireを使用する場合の注意事項と、JSをパッケージ化する場合のimportと
requireを使用する場合の注意事項を紹介します。実際のケースを見てみましょう。
前書き: 以前は、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 --> <!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});(function(module, exports, webpack_require) {//模块内容 });
立即执行函数运行执行 return webpack_require(webpack_require.s = 0);
也就是执行传入数组中的第一个模块main.js
将运行后的每个模块挂载到installedModules = {}関数をすぐに実行します 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;
})]);
Starry Navigation Bar Special Effect
String.prototype の使い方。形式 文字列連結を使用します
以上がimport と require を使用して JS をパッケージ化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。