¿Es posible importar dinámicamente módulos? -- angularjs campo con ecmascript-6 camp Relacionados El problema

Is it possible to dynamically import modules?


3
vote

problema

Español

Tengo muchas importaciones para los componentes angulares, y parece que puedo escribir una función para simplificar la importación. Simplemente no sé cómo, pero esto debería ser simple.

Importaciones de muestra:

  import {DashboardComponent} from './app/components/dashboard/dashboard.component'; angular.module('app.components').component('dashboard', DashboardComponent);  import {HeaderComponent} from './app/components/header/header.component'; angular.module('app.components').component('header', HeaderComponent);   

La siguiente función demuestra lo que quiero lograr, sin embargo, me estoy perdiendo dos conceptos para que funcione:

  1. ¿Cómo pongo una variable ( error0 ) en el error111111 ?
  2. ¿Puedo usar un filtro angular en una función como error2 en un archivo JS?
  error3  

Finalmente un error en el que me encuentro es:

'Importar' y 'Exportar' solo pueden aparecer en el nivel superior

¿Esto puede funcionar realmente?

Original en ingles

I have many imports for angular components, and it looks like I can write a function to simplify the import. I just don't know how, but this should be simple.

Sample imports:

import {DashboardComponent} from './app/components/dashboard/dashboard.component'; angular.module('app.components').component('dashboard', DashboardComponent);  import {HeaderComponent} from './app/components/header/header.component'; angular.module('app.components').component('header', HeaderComponent); 

The function below demonstrates what I want to achieve, however I'm missing two concepts to make it work:

  1. How do I put a variable (name) in the {}?
  2. Can I use an Angular filter in a function like | ucfirst in a JS file?
componentImporter('header');  function componentImporter(name) {     import {name | ucfirst + 'Component'} from './app/components/'+ name + '/' + name +'.component';      angular.module('app.components').component(name, name | ucfirst + 'Component'); } 

Finally an error I run into is:

'import' and 'export' may only appear at the top level

So can this actually ever work?

     
   
   

Lista de respuestas

4
 
vote
vote
La mejor respuesta
 

¿Esto puede funcionar realmente?

respuesta corta: no

respuesta long

El error que viste bastante lo dice todo ... import S No se puede anular el interior de los condicionales, los bucles u otras expresiones. Aquí está una Gran artículo en los módulos ES6 que se profundizan en el tema. Otra nota interesante, también mencionada en ese artículo, es que las importaciones se alzan , similares a las funciones.

Cómo poner un nombre en el {} y 2) ¿Puedo usar un filtro angular en la subasta? UCFIRST en un archivo JS?

del artículo:

... La estructura de los módulos ES6 es estática

El uso de una variable en el import lo hará dinámico. La sintaxis de soporte que está utilizando solo se puede escribir para realizar un DROP TABLE IF EXISTS my_table; CREATE TABLE my_table (id INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,user_to INT NOT NULL ,user_from INT NOT NULL ,content CHAR(3) NOT NULL ,dt DATE NOT NULL ); INSERT INTO my_table VALUES (1,1,2,'ABC','2013-11-05'), (2,4,2,'BBC','2013-11-06'), (3,3,1,'CBC','2013-11-07'), (4,5,1,'ABC','2013-11-08'), (5,1,2,'AAC','2013-11-09'), (6,5,1,'ABB','2013-11-10'), (7,3,4,'CBC','2013-11-11'), (8,1,2,'ACC','2013-11-12'); SELECT x.* FROM my_table x JOIN ( SELECT LEAST(user_to,user_from) l , GREATEST(user_to,user_from) g , MAX(dt) max_dt FROM my_table GROUP BY LEAST(user_to,user_from) , GREATEST(user_to,user_from) ) y ON y.l = LEAST(x.user_to,x.user_from) AND y.g = GREATEST(x.user_to,x.user_from) AND y.max_dt = x.dt WHERE 1 IN (x.user_to,x.user_from); +----+---------+-----------+---------+------------+ | id | user_to | user_from | content | dt | +----+---------+-----------+---------+------------+ | 3 | 3 | 1 | CBC | 2013-11-07 | | 6 | 5 | 1 | ABB | 2013-11-10 | | 8 | 1 | 2 | ACC | 2013-11-12 | +----+---------+-----------+---------+------------+ 2 (I.E. Importación de exportaciones nombradas desde el módulo dado). Esto es realmente limpio si está usando sacudir el árbol < / a>, otro artículo del Dr. Rauschmayer.

Personalmente, me gusta mantener todas mis importaciones en la parte superior de cada archivo, lo que hace que sea muy fácil ver de qué depende ese módulo en particular.

Actualización

Ahora hay la dinámico import() método. Algunos barcos como WEBPACK ya es compatible Este método de forma nativa. Este método es lo que se debe utilizar para la importación dinámica de módulos. Tenga en cuenta que las "importaciones dinámicas" es un tema de paraguas que contiene algunos subtemas que incluyen "división de código", "expresiones de módulos dinámicos", además de usar la lógica para determinar si se debe cargar un módulo y sus dependencias.

 

So can this actually ever work?

Short Answer: No

Long Answer

The error you saw pretty much says it all... imports can't be nested inside conditionals, loops, or other expressions. Here's a great article on ES6 Modules that goes in depth on the subject. Another interesting note, also mentioned in that article, is that imports are hoisted, similar to functions.

How to put a name in the {} and 2) can I use an angular filter in the fuction like | ucfirst in a js file?

From the article:

...the structure of ES6 modules is static

Using a variable in the import would make it dynamic. The bracket syntax you're using can only be written to do a partial import (i.e. Importing named exports from the given module). This is really neat if you're using tree shaking, another article by Dr. Rauschmayer.

Personally I like keeping all my imports at the top of each file making it very easy to see what that particular module is dependent on.

Update

There is now the dynamic import() method. Some bundlers like webpack already support this method natively. This method is what should be used for dynamic importing of modules. Note that "Dynamic Imports" is an umbrella topic that contains a few subtopics including "Code Splitting", "Dynamic Module Expressions", as well as using logic to determine whether a module and its dependencies should be loaded.

 
 
         
         

Relacionados problema

6  ¿Puedo usar ES6 JavaScript en NOde.js sin Babel?  ( Can i use es6 javascript in node js without babel ) 
Me estaba preguntando, si es posible usar ES6 en el nodo 10.15 ahora en 2019, ¡porque pensé, ES6 ahora sería una característica de JavaScript compatible e imp...

1  Obtener el error "C3" no se define no-nodef  ( Getting error c3 is not defined no undef ) 
Estoy tratando de escribir una directiva de gráficos de barras personalizada en JS angular usando ES6. He instalado la biblioteca C3 usando Bower Instale C3 -...

3  Cómo puedo poder asignar un objeto grande a una matriz en ES6 [duplicado]  ( How i can can map an large object to an array in es6 ) 
Esta pregunta ya tiene respuestas aquí : conversión de un objeto JS a una matriz usando jQuery ...

0  Obj.entries no formateo correctamente  ( Obj entries not formatting correctly ) 
Tengo un archivo JSON que está estructurado así: 0: '{make: "John Deere", model: "4010", year: "1958", uid: "-KzPj2RoB0CatW_vpfwq"}' 1:'{make: "John Deere ...

0  Forzar la sincronización antes de entrar en una función  ( Forcing sync before going into a function ) 
Estoy tratando de asignar una matriz de cadenas que contiene IMG URL Pero de revisar los registros en la forma en que descubrí que Cuando la matriz 'imágene...

3  ¿Por qué las cadenas Iterables en ES2015?  ( Why are strings iterables in es2015 ) 
¿Puede alguien, por favor, ayúdame a comprender mejor la decisión de diseño de hacer que las cadenas de JavaScript sean inerables en ES2015? La mayoría de los...

0  WEBPACK2 'No se puede resolver activos / img / coin.png' en 'Proyecto'  ( Webpack2 cant resolve assets img coin png in project ) 
Estoy tratando de importar una imagen dinámicamente con una declaración requerida, pero incluso antes de eso, las importaciones regulares como así no funciona...

0  Cambio de nombre de las teclas de objeto desestructurando con un símbolo o un número  ( Renaming object keys destructuring with a symbol or a number ) 
Me estaba preguntando si hay una manera de cambiar el nombre de los valores clave de objetos con un símbolo o un número como el nuevo nombre. Sé que puedes ca...

0  La palabra clave Javascript const utiliza de manera diferente [duplicado]  ( Javascript const keyword used differently ) 
Esta pregunta ya tiene respuestas aquí : Notación del soporte de objeto JavaScript ({navegación} =) ...

2  Encontrar índice en matriz bidimensional  ( Find index in two dimensional array ) 
Si tengo una matriz que contiene objetos, donde cada objeto tiene una propiedad de identificación, puedo encontrar un índice usando: function getSelectedL...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos