Maison > Article > interface Web > Comment utiliser l'importation et exiger un emballage dans JS
Comment utiliser l'importation et exiger un emballage dans JS
- php中世界最好的语言original
- 2018-03-28 15:17:572876parcourir
Cette fois, je vais vous montrer comment utiliser l'importation et require packaging en JS. Quelles sont les précautions pour utiliser l'import et require packaging en JS. Voici des cas pratiques. jetez un oeil.
Avant-propos :
J'ai déjà utilisé ES6 pour écrire du code, je l'ai empaqueté avec webpack et je suis allé en ligne. Il n'y a eu aucun problème. J'ai aussi vu le code packagé. C'est très compliqué, et je n'ai pas osé regarder ce qui se passait, mais il peut s'exécuter après le chargement !
Aujourd'hui, je vais utiliser un exemple pour comprendre le. code avant et après l'emballage !
1. Créez un dossier de fichiers et créez-y deux dossiers, le dossier app et le dossier public. Le dossier app est utilisé pour stocker les données originales et le JavaScript<.> module que nous allons écrire, et le dossier public est utilisé pour le stocker pour une navigation ultérieure. Fichiers lus par le navigateur (y compris les fichiers js générés à l'aide du packaging webpack et d'un fichier index.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
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>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";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());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";
})
]);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) {//模块内容 });
return webpack_require(webpack_require.s = 0);
dans le passé array
Montez chaque module après avoir exécuté Lorsque ce module sera ensuite nécessaire, il reviendra directement au module actuel sans exécuter le bloc de code !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());Ensuite, nous les 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_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;
})]);Je pense que vous avez lu le cas dans cet article. Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php ! Lecture recommandée :
Comment modifier la valeur dans les données de demande de vue
Comment JQuery sélectionne la valeur spécifiée dans le sélectionner le composant
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!