javascript - yeoman:使用 yo webapp，然后将 backbone 和 backbone.layoutmanager 添加到组合中

Question

我使用 yeoman webapp generator 插件成功安装了一个 webapp。

我想将 backbone 和 backbone.layoutmanager 添加到组合中。

但我收到诸如 https://github.com/isaacs/npm/issues/3275 之类的错误当我尝试运行 npm install && bower install 时。

这是我当前的 main.js

require.config({
    paths: {
        jquery: '../components/jquery/jquery',
        backbone: '../../node_modules/backbone/backbone',
        underscore: "../components/underscore/underscore",
        layoutmanager: "../../node_modules/backbone.layoutmanager/backbone.layoutmanager",
        bootstrap: 'vendor/bootstrap'
    },
    shim: {
        bootstrap: {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        layoutmanager: {
            deps: ["backbone"],
            exports: "Backbone.Layout"
        }
    },

});

require(['app', 'jquery', 'bootstrap'], function (app, $) {
    'use strict';
    // use app here
    console.log(app);
    console.log('Running jQuery %s', $().jquery);
});

我当前的 component.json

{
  "name": "learnbackbonelayoutmanager",
  "version": "0.0.0",
  "dependencies": {
    "sass-bootstrap": "~2.3.0",
    "requirejs": "~2.1.4",
    "modernizr": "~2.6.2",
    "jquery": "~1.9.1"
  },
  "devDependencies": {}
}

我当前的 package.json

{
  "name": "learnbackbonelayoutmanager",
  "version": "0.0.0",
  "dependencies": {},
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-copy": "~0.4.0",
    "grunt-contrib-concat": "~0.1.2",
    "grunt-contrib-coffee": "~0.4.0",
    "grunt-contrib-uglify": "~0.1.1",
    "grunt-contrib-compass": "~0.1.2",
    "grunt-contrib-jshint": "~0.1.1",
    "grunt-contrib-cssmin": "~0.4.1",
    "grunt-contrib-connect": "0.1.2",
    "grunt-contrib-clean": "0.4.0",
    "grunt-contrib-htmlmin": "0.1.1",
    "grunt-contrib-imagemin": "0.1.2",
    "grunt-contrib-livereload": "0.1.1",
    "grunt-bower-hooks": "~0.2.0",
    "grunt-usemin": "~0.1.9",
    "grunt-regarde": "~0.1.1",
    "grunt-requirejs": "~0.3.2",
    "grunt-mocha": "~0.2.2",
    "grunt-open": "~0.2.0",
    "matchdep": "~0.1.1"
  },
  "engines": {
    "node": ">=0.8.0"
  }
}

如何设置 yo webapp 定义的默认 webapp，并仍然向其添加 Backbone 和 Backbone.LayoutManager？

Answer 1

您似乎已经通过 npm 安装了 backbone 和 layoutmanager。如果你想将它们用作前端组件，你应该通过 bower 安装它们:

bower install --save backbone layoutmanager

之后，像这样调整 main.js 中的路径:

require.config({
    paths: {
        jquery: '../components/jquery/jquery',
        backbone: '../../components/backbone/backbone',
        underscore: '../components/underscore/underscore',
        layoutmanager: '../components/backbone.layoutmanager/backbone.layoutmanager',
        bootstrap: 'vendor/bootstrap'
    },
    shim: {
        bootstrap: {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        layoutmanager: {
            deps: ['backbone'],
            exports: 'Backbone.Layout'
        }
    },

});

require(['app', 'jquery', 'bootstrap'], function (app, $) {
    'use strict';
    // use app here
    console.log(app);
    console.log('Running jQuery %s', $().jquery);
});