在 Backbone 中使用 NPM 模块和 RequireJS

Using NPM module in Backbone with RequireJS

海萨, 我正在编写一个 webapp,它由一个 Node 后端(Express 服务器)组成,它为客户端提供一个 Backbone 应用程序。 Backbone 应用程序使用 RequireJS 加载使用的模块。 我想使用 Ag-grid 客户端,它可以作为 NPM 模块包含在内。 https://www.ag-grid.com/javascript-grid-getting-started/index.php

如何从 Backbone 引用这个 NPM 模块?

项目结构

./node_modules ./src/package.json ./src/app (Node backend + Express server) ./src/public ./src/public/main.coffee (contains requireJs config) ./src/public/scripts (Backbone views, models, etc)

main.coffee

require.config
    baseUrl: '../scripts/'
    paths:
        jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min'
        jqueryui: '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min'
        underscore: '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min'
        ...

我想在此处包含 ag-grid NPM 模块,但不必将最顶层的 ./node_modules 文件夹引用为 ../../../node_modules/ag-grid/dist/ag-grid 未计算级别..)。 另外,我希望尽可能避免第二个 package.js 和第二个 npm install

任何与此项目结构相关的帮助? 其次,有没有更好的方法来构建这样一个项目? (服务于 Backbone webapp 的节点后端)

谢谢

您猜对了,使用相对路径一直到 node_modules 目录是正确的方法。

requirejs.config({
    paths: {
        "ag-grid": "../../../node_modules/ag-grid/dist/ag-grid",
        "backbone": "../../../node_modules/backbone/backbone"
    }
});

define(["backbone", "ag-grid"], function(Backbone, agGrid) {
    // whatever
});

您还可以对所有依赖项使用 npm,并使用 RequireJS optimizer (r.js).

捆绑应用的优化版本

就个人而言,我使用 npm 来开发项目和服务器端(节点)依赖项。对于我的 Backbone 应用程序,我使用 Bower 因为它专门用于前端依赖项管理。

我有一个 .bowerrc 文件告诉 bower 在何处安装依赖项:

{
    "directory": "src/lib",
}

还有一个 Gulp 任务调用 bower install:

var bower = require("bower"),
    $ = require('gulp-load-plugins')({ lazy: true }),
    gulp = require("gulp");

gulp.task('bower', function() {
    return bower.commands.install()
        .on('log', function(data) {
            $.util.log('bower', $.util.colors.cyan(data.id), data.message);
        });
});

此任务在 npm install 之后使用 npm 挂钩自动调用:

"scripts": {
  // ...
  "postinstall": "gulp install"
}

看看 simplified-js-project,这是一个示例项目,它展示了我围绕 Backbone 和 RequireJs 项目开发的工具。