【问题标题】:How to use BackboneJS with SailsJS如何将 BackboneJS 与 SailsJS 一起使用
【发布时间】:2015-10-16 05:35:46
【问题描述】:

我正在尝试开始学习 BackboneJS,但有点卡住了。

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

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

npm install

在我的sails 项目文件夹中,我已将一个名为“backbone.js”的文件添加到文件夹“js”中。

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

我的问题是:

  1. 我需要做 var bone = 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

它将主干-min.js 注入到我的 HTML 中。

这是正确的做法吗?

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

更新 2

还将 underscore-min.js 复制到 js/dependencies 文件夹并编辑 pipeline.js 文件以在主干-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

请看下面我的回答。我找到了一种安装、管理和自动注入前端库的方法。

【问题讨论】:

    标签: backbone.js sails.js


    【解决方案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>
    

    在正确的位置。

    希望这可以帮助与我在同一条船上的其他人。

    所以我使用以下指南让它工作:

    重要提示

    首先,请确保您的 .sailsrc 文件如下所示:

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

    不是这样的:

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

    那条线阻止 Grunt 做它的事情。

    首先安装的东西

    所以我们需要先安装一些重要的工具:

    1. 鲍尔 (http://bower.io/)
    2. Grunt-Wiredep (https://github.com/stephenplusplus/grunt-wiredep)

    凉亭

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

    首先安装这个:

    [sudo] npm install -g bower
    

    您可能需要也可能不需要在npm install 前面使用sudo 命令,具体取决于您的计算机设置。

    现在要做的重要的事情是:

    bower init
    

    这将引导您完成 bower.json 文件的命令行设置并生成它。对于某些问题,我只需按几次 Enter,然后为某些答案选择“y”,例如自动添加通常忽略的文件。

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

    {
        "directory": "assets/bower_components"
    }
    

    这告诉 bower 在您运行命令 bower install 时将“bower_components”文件夹安装在哪里。

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

    Grunt-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 和主干添加了两个新条目。

    Bower 注入点

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

    就我而言,我有一个名为 layout.ejs 的文件,我告诉 bower 使用以下方法注入 javascript 库:

        ...
    
        <!-- bower:js -->
        <!-- endbower -->
    
        <!--SCRIPTS-->
        <!--SCRIPTS END-->
      </body>
    </html>
    

    请注意重要的注入占位符的顺序。在这里,我指定在 Sails 默认的“jsToInject”文件之前注入我们的“bower”库,如 jQuery 和 Backbone。

    当我编写我的 Javascript 文件时,我将它们放在 assets/js 文件夹中。我喜欢将这些 javascript 文件视为我的“前端逻辑 javascript”,而不是 jQuery 和 Backbone 等 javascript 库。

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

    添加 WireDep Grunt 任务

    我不知道如何解释 Grunt 是什么,据我了解,它是 SailsJS 用来自动执行任务的工具,例如将 javascript 文件、图像、css 复制到适当的文件夹。

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

    所以,首先要在tasks/config 文件夹中创建一个名为wiredep.js 的新文件。我的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 搜索“bower_components”文件夹的位置并将其用作注入我们的 javascript 库的前缀。

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

    即默认的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 注入

    此时,我们可以测试一下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 -->
    

    这是我们想要的。

    如果你删除上面代码中注入的三行&lt;script&gt;&lt;/script&gt;标签,然后运行:

    sails lift
    

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

    自动化 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 中。

    【讨论】:

      猜你喜欢
      • 2015-06-19
      • 1970-01-01
      • 2023-03-17
      • 2015-07-18
      • 2019-01-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多