from - importar clases en javascript

¿Puedo usar una importación de módulo ES6/2015 para establecer una referencia en el alcance ''global''?

Question

Tengo esta situación en la que trato de importar una biblioteca existente, lo que llamaré troublesome (usando Webpack / Babel FWIW) y tiene una referencia global a jQuery que estoy tratando de resolver usando la sintaxis del módulo.

He importado correctamente jquery al alcance "local" de un módulo, a través de:

import jQuery from ''jquery''

así que lo intenté:

import jQuery from ''jquery''    
import ''troublesome''

pero tal vez no sea sorprendente, me sale algo como jQuery is not a function le haya salido de troublesome.js

Lo he intentado también:

System.import(''jquery'')
.then(jQuery => {
    window.jQuery = jQuery
})
import ''troublesome''

pero, resulta que System.import es parte de la llamada especificación ''cargador de módulos'', que se sacó de la especificación es6 / 2015, por lo que no es proporcionada por Babel. Hay un poly-fill múltiple, pero Webpack no podría gestionar las importaciones dinámicas realizadas mediante llamadas a System.import todos modos.

pero ... si invoco los archivos de script en index.html de esta forma:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/troublesome/troublesome.js"></script>
<script src="the-rest-of-my-js.js"></script>

la referencia a jQuery se resuelve en troublesome.js y las cosas son buenas, pero preferiría evitar la ruta de la secuencia de comandos ya que el paquete web no los gestiona.

¿Alguien puede recomendar una estrategia decente para lidiar con escenarios como este?

actualizar

con alguna orientación de @ TN1ck, finalmente pude identificar una solución centrada en Webpack, usando el imports-loader

La configuración para esta solución se ve más o menos así:

  //...
  module: {
    loaders: [
      //...
      {
        test: require.resolve(''troublesome''),
        loader: "imports?jQuery=jquery,$=jquery"
      }
    ]
  }

Answer 1

1. ejecutar npm install import-loader .
2. reemplace la import ''troublesome'' con import ''imports?jQuery=jquery,$=jquery!troublesome .

En mi opinión, esta es la solución más simple para su pregunta. Es similar a la respuesta que escribió en su pregunta @ TN1ck, pero sin alterar la configuración de su paquete web. Para obtener más información, consulte: https://github.com/webpack/imports-loader

Answer 2

He tenido un problema similar con jspm y dygraphs. La forma en que lo resolví fue usar carga dinámica como si hubiera intentado usar System.import pero la parte importante fue cargar en cadena cada "parte" consecutiva utilizando System.import nuevamente dentro del prometedor controlador de cumplimiento (luego) después de establecer la variable de espacio de nombres global . En mi caso, en realidad tuve que tener varios pasos de importación separados entre los controladores.

La razón por la que no funcionó con jspm, y probablemente por qué no funcionó para usted también es que la sintaxis de import ... from ... se evalúa antes que cualquier código, y definitivamente antes de System.import que de asincrónico.

En tu caso, podría ser tan simple como:

import jQuery from ''jquery'';

window.jQuery = jQuery;
System.import(''troublesome'').then(troublesome => {
 // Do something with it...
});

También tenga en cuenta que la recomendación del cargador del módulo del System se ha quedado fuera de la especificación ES6 final, y se está redactando una nueva especificación del cargador .

Answer 3

Importar jQuery en su módulo no lo hace disponible para ''troublesome'' . En su lugar, podría crear un módulo de envoltura delgada para ''troublesome'' que proporciona jQuery y cualquier otro "global" requerido.

troublesome-module.js:

// Bring jQuery into scope for troublesome.
import jQuery from ''jquery'';
// Import any other ''troublesome''-assumed globals.

// Paste or have build tool interpolate existing troublesome.js code here.

Luego, en tu código, deberías poder

import ''troublesome-module'';

Answer 4

Los módulos Shimming son el camino a seguir: http://webpack.github.io/docs/shimming-modules.html

Cito de la página:

plugin ProvidePlugin

Este complemento hace que un módulo esté disponible como variable en cada módulo. El módulo es obligatorio solo si usa la variable.

Ejemplo: Haga que $ y jQuery estén disponibles en cada módulo sin necesidad de escritura require("jquery") .

new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery",
  "window.jQuery": "jquery"
})

Para usar esto con su webpack-config simplemente agregue este objeto a una matriz llamada complementos en la configuración:

// the plugins we want to use 
var plugins = [
   new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
   })
];

// this is your webpack-config
module.exports = {
    entry: ...,
    output: ...,
    module: ...,
    plugins: plugins
}

Answer 5

Para es6 / 2015 hice lo siguiente.

import {jsdom} from ''jsdom'';
import jQuery from ''jquery'';
var window = jsdom(undefined, {}).defaultView;
var $ = jQuery(window);
//window.jQuery = $; //probably not needed but it''s there if something wrong
//window.$ = $;//probably not needed but it''s there if something wrong

Entonces puedes usarlo como siempre

var text = $(''<div />'').text(''hello world!!!'').text();
console.log(text);

Espero que esto ayude.

Answer 6

Shimming está bien y hay varias formas de resolver esto, pero según mi respuesta here , lo más simple es simplemente volver a usar require para cargar la biblioteca que requiere la dependencia global; luego solo asegúrate de que esté en tu ventana. la asignación es anterior a esa declaración obligatoria, y ambos son posteriores a sus otras importaciones, y su pedido debe permanecer como se esperaba. El problema se debe a las importaciones de elevación de Babel, de modo que todas se ejecutan antes que cualquier otro código.