开源项目 Crank 使用教程

开源项目 Crank 使用教程

crankThe Just JavaScript Framework项目地址:https://gitcode.com/gh_mirrors/cr/crank

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

Crank 项目的目录结构如下：

crank/
├── examples/
│   ├── basic/
│   ├── counter/
│   ├── dynamic/
│   ├── hello/
│   ├── lazy/
│   ├── suspense/
│   └── todos/
├── packages/
│   ├── babel-plugin-crank/
│   ├── babel-preset-crank/
│   ├── crank/
│   ├── create-crank-app/
│   ├── eslint-plugin-crank/
│   ├── react-crank/
│   ├── vdom-crank/
│   └── webpack-plugin-crank/
├── scripts/
├── .gitignore
├── .npmignore
├── .prettierrc
├── babel.config.js
├── jest.config.js
├── lerna.json
├── LICENSE
├── package.json
├── README.md
└── tsconfig.json

目录结构介绍

• examples/: 包含多个示例项目，展示了 Crank 的不同使用场景。
• packages/: 包含 Crank 的核心包和其他相关工具包。
• scripts/: 包含项目构建和测试的脚本。
• .gitignore: Git 忽略文件配置。
• .npmignore: npm 忽略文件配置。
• .prettierrc: Prettier 代码格式化配置。
• babel.config.js: Babel 配置文件。
• jest.config.js: Jest 测试配置文件。
• lerna.json: Lerna 多包管理配置文件。
• LICENSE: 项目许可证。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

Crank 项目的启动文件通常位于 examples/ 目录下的各个示例项目中。以 examples/basic/ 为例，启动文件为 index.js。

examples/basic/index.js

import { renderer } from "@bikeshaving/crank";
import { App } from "./App";

renderer.render(<App />, document.body);

启动文件介绍

• import { renderer } from "@bikeshaving/crank": 导入 Crank 的渲染器。
• import { App } from "./App": 导入应用组件。
• renderer.render(<App />, document.body): 将应用组件渲染到 document.body 中。

3. 项目的配置文件介绍

Crank 项目的配置文件主要包括 babel.config.js、jest.config.js 和 tsconfig.json。

babel.config.js

module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    "@babel/preset-typescript",
    "@bikeshaving/babel-preset-crank",
  ],
};

jest.config.js

module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
  transform: {
    "^.+\\.tsx?$": "ts-jest",
  },
  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
};

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["packages/**/*"]
}

配置文件介绍

• babel.config.js: Babel 配置文件，用于转译 JavaScript 和 TypeScript 代码。
• jest.config.js: Jest 测试配置文件

crankThe Just JavaScript Framework项目地址:https://gitcode.com/gh_mirrors/cr/crank