在Backbone中将NPM模块与RequireJS一起使用

Question

Hejsa, I'm writing a webapp, which consists of a Node backend (Express server), which serves a Backbone app to the clients. The Backbone app uses RequireJS to load the modules used. I would like to use Ag-grid clientside, which can be included as an NPM module. https://www.ag-grid.com/javascript-grid-getting-started/index.php

How can I reference this NPM module from Backbone?

Project structure

./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'
        ...

I would like to include the ag-grid NPM module here, but without having to reference the very top ./node_modules folder as ../../../node_modules/ag-grid/dist/ag-grid ( didn't count the levels.. ). Also, I'd like if possible to avoid a second package.js, and a secondary npm install

Any help related specifically to this project structure? Secondarily, is there any better way to structure such a project? (Node backend serving a Backbone webapp)

Thanks

Answer 1

You guessed it and using a relative path all the way to the node_modules directory is the way to go.

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

You could also use npm for all the dependencies and bundle an optimized version of your app using the RequireJS optimizer ( r.js ).

Personally, I use npm for the development of the project and for server-side (node) dependencies. For my Backbone app, I use Bower as it's specialized in front-end dependencies management.

I have a .bowerrc file that tells bower where to install the dependencies:

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

And a Gulp task which calls 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);
        });
});

this task is called automatically after npm install with a npm hook:

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

Take a look at simplified-js-project , a sample project which shows my development tools around a Backbone and RequireJs project.