如何将凉亭组件与sails.js 连接？

Posted 2023-02-22

【中文标题】如何将凉亭组件与sails.js 连接？

【英文标题】：How do I connect bower components with sails.js?

【发布时间】：2013-08-10 22:46:27

【问题描述】：

我希望能够通过 bower 安装 javascript 依赖项并在 sails.js 应用程序中使用它们，但我无法找到一种方法来做到这一点，而不仅仅是复制一个将 bower_components 文件夹中的文件粘贴到 Sails 资产文件夹。

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

【参考方案1】：

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

这里有一个通过自定义生成器集成 Bower 的 SailsJS 包： https://www.npmjs.com/package/sails-generate-bower

Gulp 也有一个。

【讨论】：

这里非常不鼓励仅链接的答案，因为这些链接将来可能会失效。我建议您使用您引用的来源中的引用来编辑您的答案。

【参考方案2】：

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

见：Sails not generating linker

原答案：

我能够为此找到一个解决方案，这实际上非常简单。我没有意识到您可以配置 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 文件夹。如果您不希望sails 不断删除然后重新复制这些文件，您可以将它们排除在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 和sails 的一个技巧。默认情况下，你会从 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模块。

【讨论】：

这个答案现在有些过时了。

【参考方案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 时，它也会被缩小等。

【讨论】：

是的，这就是 v0.11 的答案

这个答案+1。添加.bowerrc 和"directory": "assets/bower_components" 也会有所帮助

真的很喜欢这个解决方案并添加了 .bowerrc，因为它非常干净、直接且集成良好。

.bowerrc 是迄今为止最简单的解决方案，而且效果很好。应标记为已接受的答案！

【参考方案4】：

在 Sails 0.10 中，“assets/linker”目录不再存在，但是我发现了一个简单的解决方案，该解决方案为 bower -> 资产链接器工作流程提供了一些自动化，同时还允许对最终链接的内容进行精细控制.

解决方案是将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 文件仍将自动添加到您的 bower 文件之后。

但是，这仍然不是灵丹妙药，因为此设置有 2 大注意事项：

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

2 - 资产链接器中的 bower 文件的顺序目前是按字母顺序排列的。到目前为止，我调整这个顺序的唯一办法是修补一个额外的任务，在 Sail 的 compileAssets 任务的其余部分之前手动重新排序文件。但是，我相信 grunt-bower 可以做一些事情by supporting package copy ordering。

【讨论】：

要管理脚本的顺序，只需编辑tasks/pipeline.jsvar jsFilesToInject = []

这很好用，直到版本 0.15.1 的 grunt-bower。发生了一些变化，阻止了 bower_components 被复制。

我认为现在必须修复它，因为从今天开始，它正在为我使用 grunt-bower 0.16.0。

【参考方案5】：

对不起，我迟到了。

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

这是我的项目解决方案：

我在根目录中创建了一个文件夹 bower_component。

我已经在我的 Gruntfile.js 中的 copy:dev 的数组文件中添加了这一行

'.tmp/public/linker/js/angular.js': './bower_components/angular/angular.js'

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

【讨论】：

这也可以是一个解决方案。