翻译者：长风Drupal开发

翻译地址：长风http://www.5188jxt.com/technology/drupal8-include-javascript.html

原文链接：https://www.drupal.org/docs/8/api/javascript-api/add-javascript-to-your-theme-or-module

一、Drupal8引用JavaScript的前提

有一个在Drupal8中可以正常运行的模块或者主题。

二、Drupal8引用JavaScript基本步骤

这里有两个基本步骤向你的drupal8主题或者drupal8模块来添加Javascript  1、定义一个library 2、添加这个library到一个实体

1、定义一个library 在Drupal8主题或者Drupal8模块的根目录创建一个*.libraries.yml的文件，例如example.libraries.yml，内容如下： example: version: 1.x js: js/example.js: {}

备注： 1、根元素exmple通常是模块或者主题的名字，也可以是你想用的其他任何名字， 2、定义library的版本 3、使用js元素 引用JavaScript 4、在JavaScript后面的{}中，你可以定义一些属性，例如 external:bool(告诉Drupal8这个js是不是外部的资源) header:bool(告诉Drupal8是否在header中加载脚本，而不是footer); minified:bool(告诉Drupal8是否需要压缩脚本); preprocess:bool(告诉Drupal8是否需要预处理);

三、引用js文件

根据你在Drupal8开发中的实际需求，可以有不同的方式引用library。library总是通过Drupla8模块或者Drupal8主题进行注册的， module: hook_element_info_alter() module: hook_page_attachments() theme: template_preprocess_HOOK() twig: {{ attach_library(‘example/example’) }} hook_page_attachments() 和template_preprocess_HOOK()都是相似的，如下：

function example_preprocess_node__page(array &$variables) : void { // Theme name: 'example', library name: 'example'.  $variables['#attached']['library'][] = 'example/example'; }

hook_element_info_alter()的例子如下,如果你希望在所有radio按钮的地方加载libarary， function d8_theme_element_info_alter(array &$info) : void { if (!isset($info['radio'])) { $info['radio']['#attached']['library'][] = 'example/example'; } }

四、引用依赖

如果你的Drupal8 JavaScript依赖于其他的资源，比如jQuery或者Drupal settings，你可以使用依赖属性 

example: version: 1.x js: js/example.js: {} dependencies: - core/jquery - core/drupalSettings