STIMULUS（六） —— 安装到应用程序中
在应用程序中安装 Stimulus，需要用到 stimulus npm 包。或者，在 <script> 标签中加载stimulus.umd.js。
使用 webpack
Stimulus 集成了 webpack 资源打包器，可以从应用程序文件夹中自动加载控制器文件。
调用 webpack 的 require.context 助手函数，带上 Stimulus 控制器的目录路径。然后，使用 definitionsFromContext 助手函数将产生的上下文传递到 Application#load 方法：
// src/application.js
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
const application = Application.start()
const context = require.context("./controllers", true, /\.js$/)
application.load(definitionsFromContext(context))
Controller Filenames Map to Identifiers
将控制器文件命名为 [identifier]_controller.js，这里的 identifier 对应 HTML 中的每个 data-controller 标识符。
Stimulus 通常使用下划线连接文件名的多个单词。每个下划线在其标识符里都会被翻译为连字符。
还可以使用子文件夹作为命名空间。每个斜线都会在标识符里变成两个连字符。
如果元素，你可以在控制器文件内任意位置使用连字符替换下划线。
| 控制器如果命名为 | 它的标识符将会是 |
|---|---|
| clipboard_controller.js | clipboard |
| date_picker_controller.js | date-picker |
| users/list_item_controller.js | users--list-item |
| local-time-controller.js | local-time |
使用其他构建系统
Stimulus 也能用于其他构建系统，但不再支持自动加载了。你必须在应用程序实例中显式地加载和注册控制器文件：
// src/application.js
import { Application } from "stimulus"
import HelloController from "./controllers/hello_controller"
import ClipboardController from "./controllers/clipboard_controller"
const application = Application.start()
application.register("hello", HelloController)
application.register("clipboard", ClipboardController)
使用 Babel
如果在构建系统中使用 Babel ，你需要安装@babel/plugin-proposal-class-properties 并添加至配置中：
// .babelrc
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
不使用任何构建系统
如果不喜欢使用构建系统，可以在 <script> 标签中加载 Stimulus，它可以通过 window.Stimulus 对象全局可用。
定义目标时，使用 static get targets() 方法替换 static targets = […] 类属性，因为它不再元素支持了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
<script>
(() => {
const application = Stimulus.Application.start()
application.register("hello", class extends Stimulus.Controller {
static get targets() {
return [ "name" ]
}
// …
})
})()
</script>
<head>
<body>
<div data-controller="hello">
<input data-target="hello.name" type="text">
…
</div>
</body>
</html>
浏览器支持
Stimulus 支持所有现代浏览器，包括桌面浏览器和手机浏览器。
如果需要支持 IE11 之类的旧版浏览器，需要在加载 Stimulus 前引入 @stimulus/polyfills 包。
import "@stimulus/polyfills"
import { Application } from "stimulus"
const application = Application.start()
// …
