将传统的骨干模块迁移到es6模块

Question

我拥有以这种方式声明的所有这些模块，这些模块基于一个全局app变量，然后通过gulpfile绑定

view1.js

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

view2.js

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

因此，我使用以下方法在文件之间引用：

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

在这一点上，这种方法已经过时。

事实上，我想使用babel使用新的时尚模块导出与browserify一起编译

view1.js

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

现在，我的问题是，我希望不编辑旧模块就开始迁移(至少目前是这样)。我试过这样的方法：

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

问题是，在LoginModal中，_或$等各种全局值都是未定义的。对于如何保持这两种类型的模块并将它们捆绑在一起，有什么想法吗？

Answer 1

在主文件中，您可以导入jQuery和_，并将其分配给Backbone，如下所示：

​

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

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

​

然后，在其他文件中，只需使用Backbone.$ & Backbone._来使用underscore或jquery。

或者只将它们作为依赖项导入到使用underscore或jQuery的文件中。这是正确的方法。

Answer 2

可以在Browserify选项中定义一些全局变量：为Browserify定义全局变量

在webpack中，全球模块有ProvidePlugin。