prólogo (prefacio)
Hace poco leí "nodejs desarrollan reales" Time Geeks, hay ejemplos donde un nodejs en CommonJS módulo de especificación, los ejemplos se puede concluir que si module.exports como la exportación, a continuación, la prioridad es la más alta.
Estoy muy curiosa, y su mecanismo de funcionamiento es lo que?
DE en un pequeño arranque Finalmente, el nodejs códigos de webpack envasados en código JS, y en un ángulo js como una ventana.
Por lo tanto, este artículo, quiero hacer es poner el código JS acondicionado para su desmontaje y analizados uno por uno, con el fin de entender el modo de funcionamiento es, probablemente, detrás de él.
ejemplo (caso)
En primer lugar, nos damos caso del código nodejs:
/commonjs/lib.js:
exports.hello = 'world'
module.exports = function minus (a, b) {
return a - b
}
exports.add = function (a, b) {
return a + b
}
/commonjs/index.js:
var lib = require('./lib.js')
console.log(lib)
Nuestra salida por CommonJS nodo / index.js, terminal de menos esta función.
A continuación, se ejecuta el script: webpack --devtool ninguno --mode = desarrollo --target nodo CommonJS / index.js
Se generará una carpeta dist en nuestro directorio raíz, y genera un archivo en el que main.js:
main.js:
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __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;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./commonjs/index.js");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./commonjs/index.js":
/*!***************************!*\
!*** ./commonjs/index.js ***!
\***************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
var lib = __webpack_require__(/*! ./lib.js */ "./commonjs/lib.js")
console.log(lib)
/***/ }),
/***/ "./commonjs/lib.js":
/*!*************************!*\
!*** ./commonjs/lib.js ***!
\*************************/
/*! no static exports found */
/***/ (function(module, exports) {
exports.hello = 'world'
module.exports = function minus (a, b) {
return a - b
}
exports.add = function (a, b) {
return a + b
}
/***/ })
/******/ });
Así, un total de 124 líneas de código (comentarios y líneas en blanco mucho, debe ser inferior a 100 líneas de código, o sólo quinientos sesenta por-de siete ochenta y líneas), no se necesita mucho tiempo hasta el final, pero hay que entenderlo.
división módulo (módulo split)
Todo el código adaptativa una función anónima, que el primer código en dos partes: el cuerpo de la función , los parámetros .
parámetros
En primer lugar, comenzamos con los parámetros de la lógica en el cuerpo principal de la función, los parámetros relativos a la relativamente simple:
{
"./commonjs/index.js": (function (module, exports, __webpack_require__) {
var lib = __webpack_require__("./commonjs/lib.js")
console.log(lib)
}),
"./commonjs/lib.js": (function (module, exports) {
exports.hello = 'world'
module.exports = function minus(a, b) {
return a - b
}
exports.add = function (a, b) {
return a + b
}
})
}
Voy a deshacerse de los parámetros en el comentario adicional de que el código de seguridad. Es un objeto, el objeto tiene dos tipos de funciones de propiedades, es fácil ver que podamos antes de que hicimos las maletas dos archivos de script --commonjs / index.js y CommonJS / lib.js, representantes de las dos funciones la estructura de parámetros es básicamente el mismo que los dos primeros parámetros y las exportaciones de módulos, index.js a causa de la introducción en lib.js, por lo que necesitamos para requerir un parámetro adicional (el código para __webpack_require__), es decir, antes de que seguimos dos funciones en vivo exactamente la misma secuencia de comandos en el archivo de script.
cuerpo de la función
var a = function (modules) { // webpackBootstrap
// The module cache
var installedModules = {};
// The require function
function __webpack_require__(moduleId) {
// Check if module is in cache
if (installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
// Create a new module (and put it into the cache)
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
};
// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// Flag the module as loaded
module.l = true;
// Return the exports of the module
return module.exports;
}
// expose the modules object (__webpack_modules__)
__webpack_require__.m = modules;
// expose the module cache
__webpack_require__.c = installedModules;
// define getter function for harmony exports
__webpack_require__.d = function (exports, name, getter) {
if (!__webpack_require__.o(exports, name)) {
Object.defineProperty(exports, name, {
enumerable: true,
get: getter
});
}
};
// define __esModule on exports
__webpack_require__.r = function (exports) {
if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
Object.defineProperty(exports, Symbol.toStringTag, {
value: 'Module'
});
}
Object.defineProperty(exports, '__esModule', {
value: true
});
};
// create a fake namespace object
// mode & 1: value is a module id, require it
// mode & 2: merge all properties of value into the ns
// mode & 4: return value when already ns object
// mode & 8|1: behave like require
__webpack_require__.t = function (value, mode) {
if (mode & 1) value = __webpack_require__(value);
if (mode & 8) return value;
if ((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
var ns = Object.create(null);
__webpack_require__.r(ns);
Object.defineProperty(ns, 'default', {
enumerable: true,
value: value
});
if (mode & 2 && typeof value != 'string')
for (var key in value) __webpack_require__.d(ns, key, function (key) {
return value[key];
}.bind(null, key));
return ns;
};
// getDefaultExport function for compatibility with non-harmony modules
__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;
};
// Object.prototype.hasOwnProperty.call
__webpack_require__.o = function (object, property) {
return Object.prototype.hasOwnProperty.call(object, property);
};
// __webpack_public_path__
__webpack_require__.p = "";
// Load entry module and return exports
return __webpack_require__(__webpack_require__.s = "./commonjs/index.js");
}
Éste, que se puede dividir en tres lógica general: __webpack_require__ función , __webpack_require__ función propiedades adicionales , retorno de la función .
1 .__ función webpack_require__
Nos centramos en estas pocas líneas de código:
- Se trata de una estructura de datos de un módulo:
// Create a new module (and put it into the cache)
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
};
- En conjunción con el inicio de la estructura de parámetros función anónima - (módulo, las exportaciones, requieren), las exportaciones son un subconjunto del módulo objeto, si se les da un nuevo objeto a module.exports, las exportaciones han sido abandonados, por lo que desde aquí, sabemos por qué Si utilizamos module.exports, entonces module.export serán cubiertos exportaciones.
// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
- Éste, nos preocupa es la declaración final, la salida es module.exports, esto es en realidad el código en los dos párrafos anteriores, podemos esperar.
// Flag the module as loaded
module.l = true;
// Return the exports of the module
return module.exports;
Después fuimos a ver.
volver 2. Funciones
De hecho, toda la ejecución de código sólo el último grande que un retorno, sólo se llama __webpack_require__, así que sólo miramos a éste en la línea.
Se aprobó una cadena de ruta, sólo el parámetro de la función anónima index.js funciones de script nombre de atributo correspondientes, de acuerdo con una función comunicado __webpack_require__ primero crea un objeto de módulo, y luego ejecute la siguiente instrucción:
var lib = __webpack_require__("./commonjs/lib.js")
console.log(lib)
En donde __webpack_require __ ( "./ CommonJS / lib.js") también es un objeto de crear un módulo, y operado por la secuencia de comandos para lib.js módulo, y luego regresó a código module.exports lib anteriormente.
En este caso, el mecanismo de funcionamiento módulos de importación y exportación que tenemos un esquema poco más claro, de tal manera, para la introducción de exportación entre los módulos, básicamente satisfacer nuestras necesidades.
Función adicional 3 .__ propiedad webpack_require__
Esta parte del código y esta demo es en realidad nada que ver, pero la mentalidad para ver de cerca, o leer un poco.
Estos dos son una propiedad con módulos expuestos (función anónima aprobada en el Senado, estoy aquí vamos a llamarlo bueno para el módulo de colas) y installedModules (este es el comienzo del código declara se utiliza un módulo de memoria caché de datos variables, principalmente por una módulo de datos de la bandera y composición derivada moduleId)
// expose the modules object (__webpack_modules__)
__webpack_require__.m = modules;
// expose the module cache
__webpack_require__.c = installedModules;
La siguiente función es una función de utilidad para una propiedad de un objeto para agregar captador.
// define getter function for harmony exports
__webpack_require__.d = function (exports, name, getter) {
if (!__webpack_require__.o(exports, name)) {
Object.defineProperty(exports, name, {
enumerable: true,
get: getter
});
}
};
EsModule utiliza para establecer la siguiente frase indicada en el objetivo de exportación, en particular, cómo utilizar, ya que no se utiliza esta demo, no está claro. (Probablemente pensando que debería estar en la dirección de la secuencia de comandos mediante este método se utilizará cuando EsModule de exportación, debido al tiempo que este artículo ya no está siguen verificado)
// define __esModule on exports
__webpack_require__.r = function (exports) {
if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
Object.defineProperty(exports, Symbol.toStringTag, {
value: 'Module'
});
}
Object.defineProperty(exports, '__esModule', {
value: true
});
};
La frase siguiente se declara una conjetura personal EsModule estructura de datos módulo de exportación basado.
// create a fake namespace object（声明一个假的命名空间对象）
// mode & 1: value is a module id, require it
// mode & 2: merge all properties of value into the ns
// mode & 4: return value when already ns object
// mode & 8|1: behave like require
__webpack_require__.t = function (value, mode) {
if (mode & 1) value = __webpack_require__(value);
if (mode & 8) return value;
if ((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
var ns = Object.create(null);
__webpack_require__.r(ns);
Object.defineProperty(ns, 'default', {
enumerable: true,
value: value // module.exports
});
if (mode & 2 && typeof value != 'string')
for (var key in value) __webpack_require__.d(ns, key, function (key) {
return value[key];
}.bind(null, key));
return ns;
};
Desde la frase y ver el módulo módulo .__ retorno esModule [ 'default'], en general puede ser determinada de acuerdo con el tipo de especificaciones del módulo, seleccionar un módulo método de derivación de adquisición de datos diferente, en el que para la adquisición de EsModule getDefault sobre el defecto de exportación deriva datos.
// getDefaultExport function for compatibility with non-harmony modules
__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;
};
Determinar si un objeto contiene un atributo.
// Object.prototype.hasOwnProperty.call
__webpack_require__.o = function (object, property) {
return Object.prototype.hasOwnProperty.call(object, property);
};
Este es un camino, específicamente la vía pública representa lo que no está claro.
// __webpack_public_path__
__webpack_require__.p = "";
leyenda
Finalmente, hice una tabla basada en la comprensión personal. Con base en el análisis anterior, si el modelo anterior, podemos imaginar, nodejs cuando se trata de quizás el primero en tener un guión para adquirir una colección de módulos conjunto de módulos (Este módulo se basa en el guión de entrada comenzó a set, el conjunto de todos los módulos asociados ), indiqué con el mapa de entrada, luego entrada que se pasa a la secuencia de comandos de nuevo este conjunto de módulos escritura de un guión, se supone que se trata de una función, ésta comenzó a expandirse desde el punto de entrada por métodos requieren.
última (final)
Gracias termine de leer este artículo, su lectura es mi motivación para seguir adelante.Por lo anterior, ¿qué ideas nuevas o encontrar algo malo, espero que puedan señalar.
Por último, fije las plataformas individuales a menudo visita social:
saber casi: https://www.zhihu.com/people/bi-an-yao-91/activities
RDCC: https://blog.csdn.net/YaoDeBiAn
GitHub: https://github.com/yaodebianla limitada capacidad actual de personal, y no hay capacidad independiente para construir una comunidad, si tiene alguna pregunta o ideas para comunicarse conmigo, por favor, póngase en contacto conmigo a través de una de estas plataformas, gracias! ! !
