Question

我希望能够通过 bower 安装Javascript依赖项并在sails.js应用中使用它们，但我无法找到一种方法来解决这个问题将粘贴文件从bower_components文件夹复制到 Sails 资产文件夹。

理想情况下，我认为我想使用requirejs并指向main.js文件中的 bower组件。我可能会试图在一个圆孔中敲一个方形钉，如果有的话请告诉我。欢迎任何关于使用Sails管理components/libraries的想法。

Answer 1

在Sails 0.10中，资产/链接器＆＃39;目录不再存在，但是我找到了简单解决方案的领先优势，为凉亭提供了一些自动化 - ＆gt;资产链接器工作流程，同时还允许对最终获得链接的内容进行精细控制。

解决方案是将grunt-bower添加到您的Sails.js compileAssets 任务

grunt.registerTask('compileAssets', [
    'clean:dev',
    'bower:dev',
    'jst:dev',
    'less:dev',
    'copy:dev',
    'coffee:dev'
]);

然后像这样配置你的grunt-bower任务（如 tasks / config / bower.js ）：

module.exports = function(grunt) {
  grunt.config.set('bower', {
    dev: {
        dest: '.tmp/public',
        js_dest: '.tmp/public/js',
        css_dest: '.tmp/public/styles'
    }
  });

  grunt.loadNpmTasks('grunt-bower');

};

这将自动将您的bower js和css文件复制到Sail的资产链接器的适当位置，以查找并自动添加到项目的布局模板中。您的凉亭文件后仍会自动添加任何其他js或css文件。

然而，这仍然没有灵丹妙药，因为这个设置有两大注意事项：

1 - 通过bower-grunt添加的文件必须列在bower.json的 main 数组中。如果您看到文件未被加载，您必须编辑该文件包bower.json文件或通过grunt-bower的 packageSpecific 选项手动添加依赖项

2 - 资产链接器中的凉亭文件顺序目前按字母顺序排列。到目前为止，我唯一可以调整此顺序的方法就是修补一个额外的grunt任务，在Sail的 compileAssets 任务的其余部分之前手动重新排序文件。然而，我确信有一些笨蛋可以做by supporting package copy ordering。

Answer 2

注意：以下答案不再与当前版本的SailsJS完全相关，因为自SailsJS 0.10起不支持链接器文件夹。

请参阅：Sails not generating linker

原始回答：

我能够找到解决方案，实际上非常简单。我没有意识到你可以配置凉亭放置文件的位置。

创建.bowerrc文件并更改安装了bower组件的目录，如果是Sailjs，则应将它们放入assets文件夹中。

/*
 * Create a file called .bowerrc and put the following in it.
 * This file should be in the root directory of the sails app.
 */

 {
   "directory": "assets/linker/bower_components"
 }

每当文件发生变化时，Sails都会使用grunt将它们复制到.tmp / public / assets文件夹中。如果您不希望风帆不断删除然后重新复制这些文件，您可以将它们排除在grunt文件中。

/* 
 * This is not necessary, but if you have a lot of components and don't want
 * them constantly being deleted and copied at every file change you can update
 * your Gruntfile.js with the below.
 */

 clean: {
   dev: ['.tmp/public/**',
         '!.tmp/public',
         '!.tmp/public/bower_components/**'],
   build: ['www']
 },

使用带风帆的requirejs的一个提示。默认情况下，您将从socket.io文件中收到错误，因为sails将在不使用requirejs的情况下加载它。这将抛出一个错误，因为socket.io支持amd样式加载，更多详细信息请http://requirejs.org/docs/errors.html#mismatch。

解决这个问题的最简单方法就是注释掉socket.io.js末尾附近的行。

/*
 * Comment the below out in the file assets/js/socket.io.js, if using requirejs
 * and you don't want to modify the default sails setup or socket.io.
 */

 if (typeof define === "function" && define.amd) {
   define([], function () { return io; });
 }

另一种方法是将assets / js中名为“socket.io.js”，“sails.io.js”和app.js的sails文件重新编码为amd模块。

Answer 3

我发现实现此目的的最简单方法就是将单个Bower组件添加到tasks/pipeline.js文件中。例如，以下是添加Modernizr的方法：

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

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

  // =========================================================
  // Modernizr:
  'bower_components/modernizr/modernizr.js',
  // =========================================================

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

bower_components/modernizr/modernizr.js的链接随后会插入到您的布局模板中的占位符中，当您运行sails lift --prod时，它也会被缩小等。

Answer 4

抱歉我迟到了。

我认为在链接器中包含bower_components是个坏主意，因为当你提升风帆时，其中的所有内容都将被复制到.tmp中并包含在标签中。例如，如果您将Angular包含在bower中，则脚本中将包含两个包含：一个用于angular.js，另一个用于angular.min.js。并且两者都是错误的。

以下是我的项目解决方案：

我在根目录中创建了一个文件夹bower_component。
我在gruntfile.js中添加了这行代码中的数组文件：dev

{'。tmp / public / linker / js / angular.js'：'。/ bower_components / angular /angular.js'}

对于我想要包含的每个文件，我需要在此数组中手动添加一个新行。我还没有找到另一种自动解决方案。如果有人找到了更好的解决方案......;）

Answer 5

连接SailsJS和Bower的方法不止一种。

通过自定义生成器集成Bower的SailsJS包存在： https://www.npmjs.com/package/sails-generate-bower

Gulp也有一个。

如何使用sails.js连接bower组件？

5 个答案: