FormCreate 开源项目教程

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

FormCreate 项目的目录结构如下：

form-create/
├── components/
├── packages/
├── tools/
├── types/
├── cz-config.js
├── eslintignore
├── eslintrc.js
├── gitignore
├── FORM_CREATE_OPERATION.md
├── LICENSE
├── README.md
├── babel.config.js
├── lerna.json
├── package.json
├── rollup.config.ts
└── tsconfig.json

目录结构介绍

• components/: 包含项目的主要组件。
• packages/: 包含项目的子包或模块。
• tools/: 包含项目使用的工具脚本。
• types/: 包含 TypeScript 类型定义文件。
• cz-config.js: Commitizen 配置文件。
• eslintignore: ESLint 忽略文件。
• eslintrc.js: ESLint 配置文件。
• gitignore: Git 忽略文件。
• FORM_CREATE_OPERATION.md: 操作指南文档。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• babel.config.js: Babel 配置文件。
• lerna.json: Lerna 多包管理配置文件。
• package.json: 项目依赖和脚本配置文件。
• rollup.config.ts: Rollup 打包配置文件。
• tsconfig.json: TypeScript 配置文件。

2、项目的启动文件介绍

FormCreate 项目的启动文件主要是 package.json 中的 scripts 部分。以下是一些关键的启动脚本：

{
  "scripts": {
    "dev": "rollup -c rollup.config.ts --watch",
    "build": "rollup -c rollup.config.ts",
    "lint": "eslint --ext .js,.vue src",
    "test": "jest"
  }
}

启动文件介绍

• dev: 使用 Rollup 进行开发环境打包，并开启监听模式。
• build: 使用 Rollup 进行生产环境打包。
• lint: 使用 ESLint 进行代码检查。
• test: 使用 Jest 进行单元测试。

3、项目的配置文件介绍

FormCreate 项目的主要配置文件包括：

• eslintrc.js: ESLint 配置文件，用于代码风格和质量检查。
• babel.config.js: Babel 配置文件，用于转换现代 JavaScript 代码。
• rollup.config.ts: Rollup 配置文件，用于模块打包。
• tsconfig.json: TypeScript 配置文件，用于 TypeScript 编译选项。

配置文件介绍

eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ]
}

rollup.config.ts

import typescript from 'rollup-plugin-typescript2';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/main.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'umd',
    name: 'FormCreate'
  },
  plugins: [
    resolve(),
    commonjs(),
    typescript(),
    terser()
  ]
};

tsconfig.json

{