翻译者：长风Drupal开发

原文链接：https://www.drupal.org/docs/8/api/layout-api

一、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