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

How do I connect bower components with sails.js?

提问by Cole Reed

I'd like to be able to install Javascript dependencies through bowerand use them in a sails.jsapp, but I can't figure out a way to do this with out just copying an pasting files from the bower_componentsfolder to the Sailsassets folder.

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

Ideally I think I'd like to use requirejsand point to the bower componentsin the main.jsfile. I may be trying to pound a square peg in a round hole, please let me know if so. Any thoughts on managing components/librarieswith Sails are welcome.

理想情况下，我认为我想使用requirejs，并指向凉亭的部件中main.js的文件。我可能正在尝试在圆孔中敲打方钉，如果是这样，请告诉我。components/libraries欢迎任何有关使用 Sails 进行管理的想法。

回答by user3429154

In Sails 0.10 the 'assets/linker' directory no longer exists, however I found a lead on simple solution that gives some automation to the bower -> asset linker workflow while also allowing some granular control over what exactly ends up getting linked.

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

The solution is adding grunt-bowerto your Sails.js compileAssetstask

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

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

Then configure your grunt-bower task like so (as tasks/config/bower.js):

然后像这样配置你的 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');

};

This will automatically copy your bower js and css files to the proper place for Sail's asset linker to find and automatically add to your project's layout template. Any other js or css files will still automatically be added after your bower files.

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

However this is still no silver bullet as this setup has 2 big caveats to it:

然而，这仍然不是灵丹妙药，因为这个设置有两个重要的警告：

1 - The files that are added through bower-grunt have to be listed in bower.json's mainarray. If you see a file isn't being loaded you would expect to be, you must either edit that packages bower.json file OR add the dependency manually through grunt-bower's packageSpecificoptions.

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

2 - The order of bower files in the asset linker is currently alphabetical. My only recourse to adjust this order so far is tinkering around with an additional grunt task to manually re-order files prior to the rest of Sail's compileAssetstask. However this one I'm confident there is something grunt-bower could do by supporting package copy ordering.

2 - 资产链接器中 bower 文件的顺序当前是按字母顺序排列的。到目前为止，我调整这个顺序的唯一方法是在 Sail 的compileAssets任务的其余部分之前修补一个额外的 grunt 任务来手动重新排序文件。然而，我相信 grunt-bower 可以通过支持包复制订购来做一些事情。

回答by Cole Reed

Note: the following answer is no longer completely relevant to the current version of SailsJS because there is no support for the linker folder as of SailsJS 0.10.

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

See: Sails not generating linker

请参阅：Sails 不生成链接器

Original answer:

原答案：

I was able to figure out a solution for this, which is actually pretty simple. I had not realized you could configure where bower places it's files.

我能够为此找到一个解决方案，这实际上非常简单。我没有意识到您可以配置 bower 放置文件的位置。

Create a .bowerrc file and change the directory where bower components are installed, in the case of Sailjs they should be put into the assets folder.

创建一个 .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 will then use grunt to copy them to the .tmp/public/assets folder whenever a file is change. If you don't wish to have sails continually deleting and then recopying those files you can exclude them in the grunt file.

每当文件更改时，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']
 },

One tip on using requirejs with sails. By default you will get an error from the socket.io file since sails will load it without using requirejs. This will throw an error since socket.io supports amd style loading, more details here http://requirejs.org/docs/errors.html#mismatch.

使用带风帆的 requirejs 的一个技巧。默认情况下你会从 socket.io 文件中得到一个错误，因为sails 会在不使用requirejs 的情况下加载它。这将引发错误，因为 socket.io 支持 amd 样式加载，更多详细信息在这里http://requirejs.org/docs/errors.html#mismatch。

The simplest way to fix this is to just comment out the lines near the end of the socket.io.js.

解决此问题的最简单方法是注释掉 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; });
 }

The other way would be to recode the sails files in assets/js named "socket.io.js", "sails.io.js" and app.js to be amd modules.

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

回答by Nick F

The simplest way I've found of achieving this is simply to add the individual Bower components to your tasks/pipeline.jsfile. For example, here's how you might add Modernizr:

我发现实现这一目标的最简单方法就是将单独的 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'
];

A link to bower_components/modernizr/modernizr.jsthen gets inserted in the <!--SCRIPTS-->placeholder in your layout template, and it also gets minified, etc, when you run sails lift --prod.

bower_components/modernizr/modernizr.js然后，将在<!--SCRIPTS-->布局模板的占位符中插入一个链接，并且当您运行sails lift --prod.

回答by user1853777

Sorry for my late.

对不起我迟到了。

I think include bower_components in linker it's a bad idea, because when you will lift sails, everything in it will be copied in .tmp and include in tags. For example, if you have include Angular with bower, you will have two inclusions in your script: one for angular.js and one for angular.min.js. And having both is a mistake.

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

Here is my solution on my projects :

这是我的项目解决方案：

• I have created a folder bower_component in my root directory.

• I have added this line in my Gruntfile.js in the array files in copy:dev

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

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

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

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

And for each files I want to include, I need to manually add a new line in this array. I haven't find an another automatic solution. If someone finds a better solution... ;)

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

回答by István D?brentei

There is more than one approach to hooking up SailsJS and Bower.

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

A package for SailsJS that integrates Bower via a custom generator exists here: https://www.npmjs.com/package/sails-generate-bower

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

There is one for Gulp as well.

Gulp 也有一个。