在应用程序中安装 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.jsclipboard
date_picker_controller.jsdate-picker
users/list_item_controller.jsusers--list-item
local-time-controller.jslocal-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()
// …

标签: none