原文链接： 利用Libraries API向Drupal项目中添加JS库 英文版作者：Garrett Dawson
译者：携剑看山
作为一个前端开发者，我经常需要为了前端的一些需求向项目中加入JavaScript库。在Drupal中，有很多种方式来完成这一任务，最近我开始注意到一个模块：Libraries API，它为Drupal开发者提供了一个稳定的方法来添加各种库。
一个Library是一组代码，通常是CSS和JS，有时候也会是一组PHP，或者一些其他什么东西。一般来说，这些库并不是为Drupal设计的。
过去，我直接把JS库加入到我的主题之中，接下来使用drupal_add_js()把JS加入到页面。这意味着这个库同主题被绑定在一起。如果我想要在模块中使用这个库，我必须要知道这个主题的名字——用drupal_get_path()。这很明显是个混蛋办法，他基本上断绝了模块化和代码复用的可能性。
另一个添加JS库的方法就是使用模块进行加载。这种方法的不足在于，JS库常需要通过Drupal UI来配置，配置能力有时会影响库的能力，同步更新也不容易保证。在多数情况下，这种方式可以使用Libraries API来实现。
使用这个库是很容易的。当然，最好是阅读一下完整的文档，不过想随便试试，只要几行代码就能搞定。
快速入门
安装Libraries API
如果你在使用Drush，那么很简单了：
$ drush dl libraries
下一步，建立一个目录sites/all/libraries。如果你没有使用Drush，那么在官方网站进行下载安装即可。
向sites/all/libraries中添加库
下载一个库，然后把他添加到sites/all/libraries目录中。例如，我在使用FlexSlider，用来在我的项目中实现幻灯片效果。要添加这个库，我下载了flexslider，然后把它加入我的drupal项目的sites/all/libraries/flexslider中。
创建一个小模块，让Libraries API了解这个库
在一个自定义模块中，使用hook_libraries_info来启用这个库。一个库被注册之后，他就可以被其他模块或主题使用了。
/**
* Implements hook_libraries_info().
*/
function MYMODULE_libraries_info() {
$libraries = array();
$libraries['flexslider'] = array(
'name' => 'FlexSlider',
'vendor url' => 'http://flexslider.woothemes.com/',
'download url' => 'https://github.com/woothemes/FlexSlider/zipball/master',
'version arguments' => array(
'file' => 'jquery.flexslider-min.js',
// jQuery FlexSlider v2.1
'pattern' => '/jQuery FlexSlider v(\d+\.+\d+)/',
'lines' => 2,
),
'files' => array(
'js' => array(
'jquery.flexslider-min.js',
),
),
);
return $libraries;
}
这个过程有个心得就是，提供一个版本参数或者实现版本回调是很有必要的。hook_libraries_info()的文档中提到，这两个都是可选的项目，不过至少要提供一个，否则该库无法被载入。如果对版本的事情不太在意，可以使用一个提神方法来实现version回调：
/**
* Implements hook_libraries_info().
*/
function MYMODULE_libraries_info() {
$libraries = array();
$libraries['my_library'] = array(
// Etc etc.
'version callback' => 'short_circuit_version',
);
return $libraries;
}
/**
* Short-circuit the version argument.
*/
function short_circuit_version() {
return TRUE;
}
在页面中调用新引入的库
在这个例子中，我想要在一个特定的View中载入FlexSlider。所以这里我们实现一个Views的Hook。注意这里如何Hook到指定的Views:
/**
* Implements hook_preprocess_views_view().
*/
function MYTHEME_preprocess_views_view(&$vars) {
// Uncomment the lines below to see variables you can use to target a view.
// This requires http://drupal.org/project/devel to be installed.
// dpm($vars['view']->name, 'view name');
// Hook view id specific functions.
// This is a super neato trick.
if (isset($vars['view']->name)) {
$function = 'preprocess_views_view__' . $vars['view']->name;
if (function_exists($function)) {
$function($vars);
}
}
}
/**
* Implements preprocess_views_view__VIEW().
*/
function preprocess_views_view__YOURHOOK(&$vars) {
$display_id = $vars['display_id'];
$classes = &$vars['classes_array'];
$title_classes = &$vars['title_attributes_array']['class'];
$content_classes = &$vars['content_attributes_array']['class'];
// Uncomment the lines below to see variables you can use to target a view.
// This requires http://drupal.org/project/devel to be installed.
// dpm($vars['view']->name, 'view name');
switch ($display_id) {
// Call flexslider scripts.
case 'page':
libraries_load('flexslider');
break;
}
}
使用
现在FlexSlider已经载入，就可以在这个View中使用了：
(function ($) {
$(window).load(function() {
$('.slideshow').flexslider({
animation: "slide",
controlNav: false,
namespace: 'slide-',
selector: '.slide-list > .slide-list-item'
});
}); // end window.load
})(jQuery);
你可以看到，Libraries API提供了一种便捷的方式来进行JavaScript管理。
译者按：
这种方法还是蛮不方便的，更简单的方式就是，直接手写info文件，例如我们要载入一个jsonview的库
把json view的内容解压到all/libraries/jsonview目录中。
新建文件jsonview.libraries.info
name = Json View machine name = jsonview description = json view plugins for jQuery version = 1.2.0 files[js][] = jquery.jsonview.js files[css][] = jquery.jsonview.css
利用drush libraries-list命令，查看Libraries载入结果：
名字 状态 版本 Variants Dependencies jsonview OK 1.2.0 - -
另附tcpdf库的libraries.info内容：
name = TCPDF for PHP machine name = tcpdf description = tcpdf version = 6.0.093 files[php][] = tcpdf.php