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

Question

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

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

Answer 1

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

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

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的主数组中.如果您看到文件未被加载,您必须编辑该文件包bower.json文件或通过grunt-bower的packageSpecific选项手动添加依赖项.

2 - 资产链接器中的凉亭文件顺序目前按字母顺序排列.到目前为止,我唯一可以调整此顺序的方法就是修补一个额外的grunt任务,在Sail的compileAssets剩余任务之前手动重新排序文件.然而,我敢肯定,通过支持包装复制订购, grunt-bower可以做些什么.

Answer 2

注意:以下答案不再与当前版本的SailsJS完全相关,因为从SailsJS 0.10开始不支持链接器文件夹.

请参阅:Sails没有生成链接器

原始答案:

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

创建.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将插入到<!--SCRIPTS-->布局模板的占位符中,并且在运行时也会缩小等sails lift --prod.