react modules how es6 es5 javascript reactjs

javascript - modules - es6-importa todos los módulos nombrados sin alias



import modules es6 (2)

Sé que podemos importar todos los módulos nombrados con alias como se muestra a continuación,

import * as name from "module-name";

Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

En realidad, he reexportado mis módulos en A.js y lo mismo se hereda en B.js. PFB. Ahora, tiene dos niveles de herencia, por lo que no es un gran problema importar los módulos nombrados. Pero, cuando estoy llevando esto a 5 niveles de herencia (A -> B -> C -> D -> E), necesito importar todos los módulos con nombre en todos los archivos y debo hacer la (re) exportación del mismo en todo. En lugar de hacer esto,

  • ¿Hay alguna otra manera de copiar el alcance de todos los módulos nombrados en todos los niveles sin reiterar la rueda (Importar y Exportar)
  • Detrás de la escena de este diseño está el hacer que sigan el concepto de Opps y evitar la redeclaración de los mismos módulos.

A.js

import React from ''react''; import I18n from ''i18n-js''; import m1 from ''module1''; import m2 from ''module2''; export default class A extends React.Component {} export {React, I18n, m1, m2)

B.js

import BaseComponent from ''./A''; import {React, I18n, m1, m2) from ''./A; export default class B extends A {}

¿Hay alguna manera de importar todos los módulos con nombre sin alias como import {*} from ''./A'' (en lugar de segundo en B.js)


¿Hay alguna manera de importar todos los módulos con nombre sin alias como importar {*} desde ''./A'' (en lugar de segundo en B.js)

No.

Y toda la idea de volver a exportar más de lo que necesita para guardar el "número de líneas" en el archivo js final como lo indicó en

Bcz, está poniendo dos líneas para cada importación en el archivo js final. Considerar Si hay 10 líneas de importación que, se agregarán 20 líneas en js finales. Cuando estás pensando en producción, también te costará

No tiene mucho sentido, ya que para eso son los mineros JS.

Para resumir: uno no debe hacer eso en el primer lugar:

  1. Usted export solo lo que necesita exportar
  2. Usted import lo que necesite donde sea que necesite.
  3. Usted usa los mineros JS para optimizar el tamaño del archivo JS de salida.

Este es un experimento loco que hice, que funciona, pero probablemente sea peligroso de una manera que no entiendo completamente. ¿Alguien me explicaría por qué no hacemos esto?

var lodash = require("lodash"); function $localizeAll(name) { return `eval("var " + Object.getOwnPropertyNames(${name}).reduce((code, prop)=>{ if (/^[a-zA-Z$_][a-zA-Z$_0-9]*$/.test(prop)) { return code.concat(/`/${prop} = ${name}["/${prop}"]/n/`); } else { console.warn("did not import ''" + prop + "''"); return code; } }, []).join(", ")+";")` } // this will make all exports from lodash available eval($localizeAll("lodash")); console.log(add(indexOf([1,2,6,7,12], 6), 5)); // => 7

Es un poco complicado, ya que evoluciona en dos niveles, pero básicamente itera todas las propiedades de un objeto con el nombre dado en el alcance y enlaza todas las propiedades que tienen nombres calificados para ser identificadores de un identificador con ese nombre:

var length = lodash["length"] , name = lodash["name"] , arguments = lodash["arguments"] , caller = lodash["caller"] , prototype = lodash["prototype"] , templateSettings = lodash["templateSettings"] , after = lodash["after"] , ary = lodash["ary"] , assign = lodash["assign"] , assignIn = lodash["assignIn"] , assignInWith = lodash["assignInWith"] , assignWith = lodash["assignWith"] , at = lodash["at"] , before = lodash["before"] , bind = lodash["bind"] , bindAll = lodash["bindAll"] , bindKey = lodash["bindKey"] //... , upperCase = lodash["upperCase"] , upperFirst = lodash["upperFirst"] , each = lodash["each"] , eachRight = lodash["eachRight"] , first = lodash["first"] , VERSION = lodash["VERSION"] , _ = lodash["_"] ;

Hay algunos ejemplos en esta lista de por qué es una mala idea (por ejemplo, sombrea los arguments ).

Debería poder usar esto de la siguiente manera (aunque probablemente no debería decir lo que dice arriba).

B.js

import BaseComponent, * as extras from ''./A''; eval($localizeAll("extras")); export default class B extends BaseComponent {}

De todos modos, no pude resistirme a probar esto;)