如何将 BackboneJS 与 SailsJS 一起使用
How to use BackboneJS with SailsJS
我正在尝试开始学习 BackboneJS，但有点停滞不前。
我使用 SailsJS 作为后端框架。到目前为止，我已经使用 Mac 终端生成了一个新的 sails 项目。
我还将 backbone 添加到我的 package.json 文件并完成了：
npm install
在我的 sails 项目文件夹中，我添加了一个名为 "backbone.js" 的文件到文件夹 "js"。
我还在 "views" 文件夹中添加了一个名为 "dashboard.ejs" 的新文件。
我的问题是：
- 我需要做吗 var backbone = require('backbone');在我的 backbone.js 文件中 ?
- 如何将我的 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
还将下划线-min.js复制到js/dependencies文件夹并编辑pipeline.js文件以在backbone-[之前先插入下划线-min.js =68=].
// 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
请看下面我的回答。我找到了一种安装、管理和自动注入前端库的方法。
:)
好的！
我知道如何设法找到一个像样的解决方案来做我想做的事 - 自动注入我使用前端依赖管理器安装的所有前端依赖项，这样当我 运行:
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
}
}
该行阻止 G运行t 执行它的操作。
首先要安装的东西
所以我们需要先安装一些重要的工具：
- 鲍尔 (http://bower.io/)
- G运行t-Wiredep (https://github.com/stephenplusplus/grunt-wiredep)
凉亭
Bower 是前端依赖管理器，它将获取和安装我们的前端库，如 jQuery 和 Backbone。
首先使用以下方法安装：
[sudo] npm install -g bower
您可能需要也可能不需要在 npm install 前面使用 sudo 命令，具体取决于您的计算机设置。
现在要做的重要事情是：
bower init
这将引导您完成 bower.json 文件的命令行设置并生成它。我只是在某些问题上按几次回车，然后选择 'y' 来获得某些答案，例如自动添加通常忽略的文件。
我们需要做的最后一个重要的凉亭步骤。创建一个名为 .bowerrc 的新文件并添加此代码：
{
"directory": "assets/bower_components"
}
当您 运行 命令 bower install.
时，这会告诉 Bower 在何处安装 "bower_components" 文件夹
SailsJS 的问题是实际的 javascript、css 和图像是从 .tmp/public 文件夹提供的，所以如果我们在 bower_components 文件夹之外有 assets 文件夹，我们的 bower_components 将不会被复制到 .tmp/public 文件夹。如果省略此步骤，稍后我们将收到 404 Not Found 错误。
G运行t-Wiredep
G运行t-Wiredep 是帮助我们将已安装的 Bower 组件（前端库，如 jQuery 和 Backbone）注入我们的 HTML 的工具模板布局文件
我们在设置 Bower 管理器之后安装它。安装 G运行t-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 注入点
对了，我们所有的重要工具都安装好了。我们现在需要告诉 Wiredep 在哪里注入我们的 jQuery 和 Backbone 标签。
在我的例子中，我有一个名为 layout.ejs 的文件，我告诉 bower 使用以下方法注入 javascript 库：
...
<!-- bower:js -->
<!-- endbower -->
<!--SCRIPTS-->
<!--SCRIPTS END-->
</body>
</html>
请注意注入占位符的顺序，这很重要。在这里，我指定在 Sails 默认 "jsToInject" 文件之前注入我们的 "bower" 库，例如 jQuery 和 Backbone。
当我编写 Javascript 文件时，我将它们放在 assets/js 文件夹中。我喜欢将这些 javascript 文件视为我的 "front-end logic javascripts" 而不是像 jQuery 和 Backbone.
这样的 javascript 库
因此，如果我将 bower 脚本占位符放在 Sails 的默认 SCRIPTS 占位符之后，如果我在 jQuery 库被包含之前尝试使用 jQuery，我会得到错误：
添加 WireDep G运行t 任务
我不知道如何解释 G运行t 是什么，据我了解，这是 SailsJS 用来自动执行复制 javascript 文件、图像、css 到相应的文件夹。
我们希望 SailsJS 完成的 G运行t 任务之一是自动将 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');
};
上面g运行t任务文件中重要的一行是：
ignorePath: '../assets',
Wiredep 搜索 "bower_components" 文件夹的位置，并将其用作注入我们的 javascript 库的前缀。
记得之前我们告诉 bower 在 assets 文件夹中安装 bower_components 文件夹，以便 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>
G运行t-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 -->
这就是我们想要的。
如果把上面代码中注入的三行<script></script>标签删掉试试运行ning:
sails lift
您可能会注意到 wiredep 没有注入 javascript 库。我们绝对不想每次都在 运行 sails lift 之前输入 grunt wiredep。
自动化 G运行t 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.
我正在尝试开始学习 BackboneJS，但有点停滞不前。
我使用 SailsJS 作为后端框架。到目前为止，我已经使用 Mac 终端生成了一个新的 sails 项目。
我还将 backbone 添加到我的 package.json 文件并完成了：
npm install
在我的 sails 项目文件夹中，我添加了一个名为 "backbone.js" 的文件到文件夹 "js"。
我还在 "views" 文件夹中添加了一个名为 "dashboard.ejs" 的新文件。
我的问题是：
- 我需要做吗 var backbone = require('backbone');在我的 backbone.js 文件中 ?
- 如何将我的 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
还将下划线-min.js复制到js/dependencies文件夹并编辑pipeline.js文件以在backbone-[之前先插入下划线-min.js =68=].
// 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
请看下面我的回答。我找到了一种安装、管理和自动注入前端库的方法。
:)
好的！
我知道如何设法找到一个像样的解决方案来做我想做的事 - 自动注入我使用前端依赖管理器安装的所有前端依赖项，这样当我 运行:
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
}
}
该行阻止 G运行t 执行它的操作。
首先要安装的东西
所以我们需要先安装一些重要的工具：
- 鲍尔 (http://bower.io/)
- G运行t-Wiredep (https://github.com/stephenplusplus/grunt-wiredep)
凉亭
Bower 是前端依赖管理器，它将获取和安装我们的前端库，如 jQuery 和 Backbone。
首先使用以下方法安装：
[sudo] npm install -g bower
您可能需要也可能不需要在 npm install 前面使用 sudo 命令，具体取决于您的计算机设置。
现在要做的重要事情是：
bower init
这将引导您完成 bower.json 文件的命令行设置并生成它。我只是在某些问题上按几次回车，然后选择 'y' 来获得某些答案，例如自动添加通常忽略的文件。
我们需要做的最后一个重要的凉亭步骤。创建一个名为 .bowerrc 的新文件并添加此代码：
{
"directory": "assets/bower_components"
}
当您 运行 命令 bower install.
SailsJS 的问题是实际的 javascript、css 和图像是从 .tmp/public 文件夹提供的，所以如果我们在 bower_components 文件夹之外有 assets 文件夹，我们的 bower_components 将不会被复制到 .tmp/public 文件夹。如果省略此步骤，稍后我们将收到 404 Not Found 错误。
G运行t-Wiredep
G运行t-Wiredep 是帮助我们将已安装的 Bower 组件（前端库，如 jQuery 和 Backbone）注入我们的 HTML 的工具模板布局文件
我们在设置 Bower 管理器之后安装它。安装 G运行t-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 注入点
对了，我们所有的重要工具都安装好了。我们现在需要告诉 Wiredep 在哪里注入我们的 jQuery 和 Backbone 标签。
在我的例子中，我有一个名为 layout.ejs 的文件，我告诉 bower 使用以下方法注入 javascript 库：
...
<!-- bower:js -->
<!-- endbower -->
<!--SCRIPTS-->
<!--SCRIPTS END-->
</body>
</html>
请注意注入占位符的顺序，这很重要。在这里，我指定在 Sails 默认 "jsToInject" 文件之前注入我们的 "bower" 库，例如 jQuery 和 Backbone。
当我编写 Javascript 文件时，我将它们放在 assets/js 文件夹中。我喜欢将这些 javascript 文件视为我的 "front-end logic javascripts" 而不是像 jQuery 和 Backbone.
因此，如果我将 bower 脚本占位符放在 Sails 的默认 SCRIPTS 占位符之后，如果我在 jQuery 库被包含之前尝试使用 jQuery，我会得到错误：
添加 WireDep G运行t 任务
我不知道如何解释 G运行t 是什么，据我了解，这是 SailsJS 用来自动执行复制 javascript 文件、图像、css 到相应的文件夹。
我们希望 SailsJS 完成的 G运行t 任务之一是自动将 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');
};
上面g运行t任务文件中重要的一行是：
ignorePath: '../assets',
Wiredep 搜索 "bower_components" 文件夹的位置，并将其用作注入我们的 javascript 库的前缀。
记得之前我们告诉 bower 在 assets 文件夹中安装 bower_components 文件夹，以便 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>
G运行t-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 -->
这就是我们想要的。
如果把上面代码中注入的三行<script></script>标签删掉试试运行ning:
sails lift
您可能会注意到 wiredep 没有注入 javascript 库。我们绝对不想每次都在 运行 sails lift 之前输入 grunt wiredep。
自动化 G运行t Wiredep 命令
最后一步是自动执行 grunt wiredep 命令，因此当我们 运行 sails lift.
我们通过在文件中注册任务来做到这一点：
tasks/register/default.js
我的 default.js 看起来像这样：
module.exports = function (grunt) {
grunt.registerTask('default', ['wiredep', 'compileAssets', 'linkAssets', 'watch']);
};
现在将wiredep添加到默认任务后，当我们运行:
sails lift
我们可以检查我们的 layout.ejs 文件，再次看到我们的 javascript 库自动注入到我们的 HTML.