San-Composition 项目教程

San-Composition 项目教程

san-composition项目地址:https://gitcode.com/gh_mirrors/sa/san-composition

项目的目录结构及介绍

San-Composition 项目的目录结构如下：

san-composition/
├── docs/
│   └── api.md
├── github/
│   └── workflows/
├── example/
├── test/
├── types/
├── .babelrc
├── .browserslistrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── index.js
├── package-lock.json
├── package.json
├── rollup.config.js

目录结构介绍

• docs/: 包含项目的文档文件，如 api.md。
• github/: 包含 GitHub 相关的工作流配置文件。
• example/: 包含项目的一些示例代码。
• test/: 包含项目的测试代码。
• types/: 包含 TypeScript 类型定义文件。
• .babelrc: Babel 配置文件。
• .browserslistrc: 指定项目支持的浏览器版本。
• .editorconfig: 编辑器配置文件，用于统一代码风格。
• .eslintignore: ESLint 忽略文件配置。
• .eslintrc.js: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• CHANGELOG.md: 项目更新日志。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• index.js: 项目的入口文件。
• package-lock.json: npm 依赖锁定文件。
• package.json: 项目配置文件，包含依赖、脚本等信息。
• rollup.config.js: Rollup 打包配置文件。

项目的启动文件介绍

项目的启动文件是 index.js。这个文件是项目的入口点，负责初始化项目并启动应用。

// index.js
import san from 'san';
import App from './App';

const app = new App();
app.attach(document.body);

启动文件介绍

• import san from 'san': 引入 San 框架。
• import App from './App': 引入主应用组件 App。
• const app = new App(): 创建 App 组件的实例。
• app.attach(document.body): 将 App 组件挂载到页面的 body 元素上。

项目的配置文件介绍

项目的配置文件主要包括 package.json 和 rollup.config.js。

package.json

package.json 文件包含了项目的元数据和依赖信息，以及一些脚本命令。

{
  "name": "san-composition",
  "version": "1.0.0",
  "description": "A composition API for San framework",
  "main": "index.js",
  "scripts": {
    "build": "rollup -c",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "san": "^3.10.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "rollup": "^2.3.4"
  }
}

rollup.config.js

rollup.config.js 文件是 Rollup 的配置文件，用于打包项目。

import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd',
    name: 'SanComposition'
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({ babelHelpers: 'bundled' })
  ]
};

配置文件介绍

• package.json: 包含项目名称、版本、描述、入口文件、脚本命令、依赖等信息。
• rollup.config.js: 配置 Rollup

san-composition项目地址:https://gitcode.com/gh_mirrors/sa/san-composition