如何将BackboneJS与SailsJS一起使用

Question

我正在尝试开始学习BackboneJS，但有点不知所措。

我正在使用SailsJS作为后端框架。到目前为止，我已经使用我的Mac终端生成了一个新的sails项目。

我还在我的package.json文件中添加了主干并完成了：

npm install

在我的sails项目文件夹中，我在“js”文件夹中添加了一个名为“backbone.js”的文件。

我还在“views”文件夹中添加了一个名为“dashboard.ejs”的新文件。

我的问题是：

1. 我需要做var backbone = require（'backbone'）;在我的backbone.js文件里面？
2. 如何将backbone.js代码包含到dashboard.ejs文件中？我是否使用某种Grunt注射物或手动键入<script src="js/backbone.js"></script>

更新

我已将backbone-min.js文件夹中的node_modules/backbone文件手动复制到我的js/dependencies文件夹中并重新运行：

sails lift

它将backbone-min.js注入我的HTML。

这是正确的方法吗？

对我来说感觉不对........（我必须手动将backbone-min.js复制到js / dependencies文件夹。）

更新2

还将underscore-min.js复制到js / dependencies文件夹并编辑了pipeline.js文件，以便在backbone-min.js之前首先注入underscore-min.js。

// Client-side javascript files to inject in order
// (uses Grunt-style wildcard/glob/splat expressions)
var jsFilesToInject = [

  // Load sails.io before everything else
  'js/dependencies/sails.io.js',
  'js/dependencies/underscore-min.js',

  // Dependencies like jQuery, or Angular are brought in here
  'js/dependencies/**/*.js',

  // All of the rest of your client-side js files
  // will be injected here in no particular order.
  'js/**/*.js'
];

我的代码现在似乎有效......

更新3

请参阅下面的答案。我找到了一种安装，管理和自动化注入前端库的方法。

Answer 1

：）

好的！

我有些如何设法找到一个能够满足我想要的体面解决方案 - 使用前端依赖关系管理器自动注入我安装的所有前端依赖关系，以便在运行时：

sails lift

我的layout.ejs或index.html（无论你想使用什么）自动包含：

<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/underscore/underscore.js"></script>
<script src="../bower_components/backbone/backbone.js"></script>

在正确的位置。

希望这有助于与我在同一条船上的其他人。

所以我使用以下指南来实现它：

• https://github.com/stephenplusplus/grunt-wiredep
• http://grunt-tasks.com/grunt-wiredep/
• grunt: command not found when running from terminal

重要提示

在此之前，请确保您的.sailsrc文件如下所示：

{
  "generators": {
    "modules": {}
  },
  "hooks": {
  }
}

而不是这样：

{
  "generators": {
    "modules": {}
  },
  "hooks": {
    "grunt": false // this line needs to be deleted
  }
}

该行阻止了Grunt做其事。

首先安装的东西

因此我们首先需要安装一些重要的工具：

1. Bower（http://bower.io/）
2. Grunt-Wiredep（https://github.com/stephenplusplus/grunt-wiredep）

<强>鲍尔

Bower是前端依赖管理器，它将获取并安装我们的前端库，如jQuery和Backbone。

首先使用以下方法安装：

[sudo] npm install -g bower

根据您的计算机设置，您可能需要也可能不需要在sudo前面使用npm install命令。

现在要做的重点是：

bower init

这将指导您完成bower.json文件的命令行设置并生成它。我只需按几次输入某些问题，然后选择＆＃39; y＆＃39;对于某些答案，例如自动添加常见的忽略文件。

我们需要做的最后一个重要的凉亭步骤。创建一个名为.bowerrc的新文件并添加以下代码：

{
    "directory": "assets/bower_components"
}

这告诉bower在哪里安装＆＃34; bower_components＆＃34;运行命令bower install时的文件夹。

使用SailsJS的是实际的javascript，css和图像是从.tmp/public文件夹提供的，所以如果我们在assets文件夹之外有bower_components文件夹，我们的bower_components将不会被复制到.tmp/public文件夹。如果我们省略此步骤，我们将在以后收到404 Not Found错误。

<强>咕噜-Wiredep

Grunt-Wiredep是帮助我们将已安装的bower组件（如jQuery和Backbone等前端库）注入HTML模板布局文件的工具

我们在设置Bower管理器后安装下一个。使用以下方法安装Grunt-Wiredep：

[sudo] npm install --save-dev grunt-wiredep

安装我们的前端Javascript库

好的，现在有了Bower，我们可以使用命令安装我们的javascript前端库：

bower install jquery --save

和

bower install backbone --save

这会将jQuery和Backbone库安装到bower_components文件夹中。

我们的bower.json文件应显示：

{
  ...
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.1.4",
    "backbone": "~1.2.1"
  }
}

注意依赖项部分如何分别为jquery和backbone提供两个新条目。

Bower注射点

Rightio，所以我们安装了所有重要的工具。我们现在需要告诉Wiredep在哪里注入我们的jQuery和Backbone标签。

在我的情况下，我有一个名为layout.ejs的文件，我告诉bower使用以下方法注入javascript库：

    ...

    <!-- bower:js -->
    <!-- endbower -->

    <!--SCRIPTS-->
    <!--SCRIPTS END-->
  </body>
</html>

请注意注射占位符的顺序，这很重要。在这里，我已指定注入我们的＆＃34; bower＆＃34;像jQuery和Backbone这样的库BEFORE Sails默认＆＃34; jsToInject＆＃34;文件。

当我编写Javascript文件时，我将它们放在assets/js文件夹中。我喜欢将这些javascript文件视为我的＆＃34;前端逻辑javascripts＆＃34;而不是像jQuery和Backbone这样的javascript库。

因此，如果我在Sails的默认SCRIPTS占位符之后放置bower脚本占位符，如果我在包含jQuery库之前尝试使用jQuery，我会收到错误：

添加WireDep Grunt任务

我不知道如何解释Grunt是什么，据我所知，它是SailsJS用来自动执行任务的副本，例如将javascript文件，图像，css复制到相应的文件夹。

我们希望SailsJS执行的Grunt任务之一是将bower_components文件夹中已安装的Bower组件自动注入我们的HTML文件中，而不是手动输入。

因此，首先要在wiredep.js文件夹中创建一个名为tasks/config的新文件。我的wiredep.js看起来像这样：

module.exports = function(grunt) {
    grunt.config.set('wiredep', {
        task: {
            // Point to the files that should be updated when
            // you run 'grunt wiredep'
            src: [
                'views/**/*.ejs',   // .html support...
            ],

            // we need this line so injection is correct path
            ignorePath: '../assets',

            options: {
                // See wiredep's configuration documentation for the options
                // you may pass:

                // https://github.com/taptapship/wiredep#configuration
            }
        }
    });

    grunt.loadNpmTasks('grunt-wiredep');
};

上述grunt任务文件中的重要一行是：

ignorePath: '../assets',

Wiredep搜索＆＃34; bower_components＆＃34;的位置。文件夹并使用它作为注入我们的JavaScript库的前缀。

回想一下，我们告诉bower在assets文件夹中安装bower_components文件夹，以便Sails pipeline.js将assets文件夹中的内容复制到.tmp/public文件夹，但这与Wiredep＆＃冲突39; s默认注入路径前缀。

即。默认的Wiredep注入将变为：

// Sails does not serve files from the assets folder!
<script src="../assets/bower_components/backbone/backbone.js"></script>

我们需要它成为：

// bower_components is in the .tmp/public folder where Sails serves content
<script src="/bower_components/backbone/backbone.js"></script>

Grunt-Wiredep Injection

此时，我们可以测试是否注入了wiredep。

在我的Mac终端中，当我运行时（在我的sailsjs项目的根目录）：

grunt wiredep

我可以在我的layout.ejs（我的Sailsjs模板文件）中看到，我有

<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/underscore/underscore.js"></script>
<script src="/bower_components/backbone/backbone.js"></script>
<!-- endbower -->

这就是我们想要的。

如果删除上述代码中注入的三行<script></script>标记并尝试运行：

sails lift

你可能会注意到wiredep没有注入javascript库。我们绝不想在每次运行grunt wiredep之前输入sails lift。

自动化Grunt Wiredep命令

最后一步是自动执行grunt wiredep命令，以便在运行sails lift时wiredep自动注入javascript库。

我们通过在文件中注册任务来完成此任务：

tasks/register/default.js

我的default.js看起来像这样：

module.exports = function (grunt) {
    grunt.registerTask('default', ['wiredep', 'compileAssets', 'linkAssets',  'watch']);
};

现在将wiredep添加到默认任务后，当我们运行时：

sails lift

我们可以检查我们的layout.ejs文件，再次看到我们的javascript库会自动注入到我们的HTML中。