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 项目可以顺利启动并运行。