Migrer anciens modules Backbone façonné à ES6 modules

Question

j'ai tous ces modules qui sont déclarés dans ce mode basé sur une variable globale app qui est ensuite empaqueté par gulpfile

view1.js

var app = app || {} 
app.View1 = Backbone.View.extend({}); 

view2.js

var app = app || {} 
app.View1 = Backbone.View.extend({}); 

Donc je référence entre les fichiers en utilisant:

var app = app || {}; 
new app.View1(); 
new app.View2(); 

À ce stade, cette approche est obsolète.

En utilisant babel enfait je voudrais compiler avec browserify à l'aide de nouvelles exportations de modules de mode

de view1.js

import Backbone 
export default = Backbone.View.extend({}); 

Maintenant, mon problème est que je voudrais commencer la migration sans modifier le anciens modules (au moins pour l'instant). J'ai essayé quelque chose comme ça:

import * as _ from "underscore"; 
import Backbone from "Backbone"; 
import * as LoginModal from "../views/loginModal"; 
import Router from "./router"; 

new LoginModal(); 
new Router(); 
Backbone.history.start({ 
    pushState : true, 
    hashChange : false 
}); 

Le problème est que dans LoginModal divers que _ ou GLOBALS $ ne sont pas définis. Toute idée sur la façon de garder les deux types de modules et de les regrouper?

Answer 1

Dans votre fichier principal, vous pouvez importer jQuery et _ et l'affecter à Backbone comme ceci:

import $ from "jquery"; 
 
import _ from "underscore"; 
 

 
Backbone.$ = $; 
 
Backbone._ = _;

Et puis dans vos autres fichiers, vous pouvez simplement utiliser Backbone.$ & Backbone._ à utilisez underscore ou jquery.

ou seulement les importer en tant que dépendances dans les fichiers qui utilisent underscore ou jQuery. C'est la bonne façon de le faire.

Answer 2

Vous pouvez définir des variables globales dans les options Browserify: Defining global variable for Browserify

En webpack il y a ProvidePlugin pour les modules globaux.