Cet article présente principalement l'analyse des principes d'utilisation de l'importation et du packaging en JavaScript. Les amis dans le besoin peuvent s'y référer
Avant-propos :
J'ai déjà utilisé ES6 pour écrire du code. Après l'avoir empaqueté avec webpack, je l'ai exécuté en ligne. Il n'y a eu aucun problème. J'ai également vu le code empaqueté et je n'ai pas osé voir quoi. se passait. Après le chargement, il a fonctionné !
Aujourd'hui, utilisons un exemple pour comprendre le code avant et après l'emballage !
1. Créez un dossier et créez-y deux dossiers, le. app et le dossier public. Le dossier app utilise Pour stocker les données originales et le module JavaScript que nous allons écrire, le dossier public est utilisé pour stocker les fichiers qui seront lus par le navigateur (y compris les fichiers js générés à l'aide du packaging webpack et d'un index. fichier .html). Ensuite, nous créons trois autres fichiers :
index.html -- placés dans le dossier public
Greeter.js -- Placez-le dans ; le dossier de l'application ;
main.js -- Placez-le dans le dossier de l'application
À ce stade, la structure du projet est celle indiquée ; ci-dessous Montrant la
Structure du projet
Nous écrivons le code HTML le plus basique dans le fichier index.html, son but ici est d'introduire le fichier js packagé (ici nous d'abord nommez le fichier js packagé bundle.js (nous en parlerons en détail plus tard).
<!-- 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>
Copier après la connexion
Nous définissons une fonction dans Greeter.js qui renvoie un élément html contenant des informations de bienvenue, et exportons cette fonction en tant que module selon la spécification CommonJS :
// Greeter.js
exports.greet= function() {
var greet = document.createElement('p');
greet.textContent = "Hi there and greetings!";
return greet;
};
exports.USER_INFO = "userInfo";Copier après la connexion
main. js Dans le fichier, nous écrivons le code suivant pour insérer les nœuds renvoyés par le module Greeter dans la page.
//main.js
let {greeter,USER_INFO} =require('./Greeter.js');
console.log(USER_INFO);
document.querySelector("#root").appendChild(greeter());Copier après la connexion
Après emballage avec 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";
})
]);Copier après la connexion
La première couche consiste à envelopper la fonction d'exécution immédiate (contenu en gras), le paramètre est un tableau, et chaque élément du tableau est les modules correspondants, chaque module est enveloppé dans (function(module, exports, __webpack_require__) {//模块内容 });
pour exécuter la fonction immédiatement return __webpack_require__(__webpack_require__.s = 0);
, c'est-à-dire pour exécuter le premier module main.js
dans le passé array
Montez chaque module après avoir exécuté installedModules = {} Lorsque ce module sera ensuite nécessaire, il reviendra directement au module actuel sans exécuter le bloc de code !
Ensuite, modifiez le besoin d'importer et de prendre. un aperçu de l'emballage Comment réaliser l'implémentation finale
Nous modifions les informations de Greeter.js comme suit :
// 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());Copier après la connexion
Ensuite, nous l'emballons à nouveau :
(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;
})]);Copier après la connexion
Ce qui précède est ce que j'ai compilé pour tout le monde. Oui, j'espère que cela sera utile à tout le monde à l'avenir.
Articles connexes :
Méthode Vue2.0 pour implémenter des conseils d'invite de navigation dans les pages
vue2.0 basée sur la valeur d'état Comment afficher les changements de style
Comment implémenter une application de prise de notes à l'aide de Vuex
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
