Stimulus 开源项目使用教程

Stimulus 开源项目使用教程

stimulusA modest JavaScript framework for the HTML you already have项目地址:https://gitcode.com/gh_mirrors/st/stimulus

1. 项目的目录结构及介绍

Stimulus 项目的目录结构相对简单，主要包含以下几个部分：

stimulus/
├── app/
│   ├── assets/
│   │   └── javascripts/
│   │       └── controllers/
│   │           ├── application_controller.js
│   │           └── hello_controller.js
├── bin/
│   └── webpacker
├── config/
│   ├── webpack/
│   │   └── environment.js
│   └── webpacker.yml
├── package.json
├── README.md
└── yarn.lock

目录结构介绍

• app/assets/javascripts/controllers/: 存放 Stimulus 控制器文件，每个控制器对应一个 JavaScript 文件。
• bin/: 包含 Webpacker 的执行脚本。
• config/: 包含项目的配置文件，如 Webpack 配置和 Webpacker 配置。
• package.json: 项目的依赖管理文件。
• README.md: 项目的说明文档。
• yarn.lock: 锁定依赖版本的文件。

2. 项目的启动文件介绍

Stimulus 项目的启动文件主要是 application_controller.js，它位于 app/assets/javascripts/controllers/ 目录下。

// app/assets/javascripts/controllers/application_controller.js
import { Controller } from "stimulus";

export default class extends Controller {
  connect() {
    console.log("Stimulus application connected");
  }
}

启动文件介绍

• application_controller.js: 这是 Stimulus 的主控制器，负责初始化和连接所有其他控制器。

3. 项目的配置文件介绍

Stimulus 项目的配置文件主要位于 config/ 目录下，包括 Webpack 和 Webpacker 的配置。

Webpack 配置

// config/webpack/environment.js
const { environment } = require('@rails/webpacker');
const StimulusWebpackPlugin = require('stimulus-webpack-plugin');

environment.plugins.append('StimulusWebpackPlugin', new StimulusWebpackPlugin());

module.exports = environment;

Webpacker 配置

# config/webpacker.yml
default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: true

development:
  <<: *default
  compile: true
  ...

配置文件介绍

• environment.js: Webpack 的环境配置文件，用于配置 Webpack 插件和加载器。
• webpacker.yml: Webpacker 的配置文件，定义了资源路径、缓存路径等。

通过以上配置，Stimulus 项目可以顺利启动并运行。

stimulusA modest JavaScript framework for the HTML you already have项目地址:https://gitcode.com/gh_mirrors/st/stimulus