Migrate old fashioned Backbone modules to es6 modules

Question

I have all these modules that are declared in this fashion based on a Global app variable which is then bundled via gulpfile

view1.js

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

view2.js

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

So I reference between the files using:

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

At this point this approach is obsolete.

Using babel infact I would like to compile with browserify using new fashion module exports

view1.js

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

Now, my problem is that I would like to start migrating without editing the old modules ( at least for now ). I tried something like that:

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
});

The problem is that in LoginModal various globals as _ or $ are undefined. Any idea on how to keep both types of modules and bundle them together?

Answer 1

In your main file you can import jQuery and _ and assign it to Backbone like so:

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

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

And then in your other files, you can just use Backbone.$ & Backbone._ to use underscore or jquery.

OR only import them as dependencies in the files that use underscore or jQuery. This is the correct way to do it.

Answer 2

You can define some global variables in Browserify options: Defining global variable for Browserify

In webpack there's ProvidePlugin for global modules.