Marksy 项目使用教程

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

Marksy 项目的目录结构如下：

marksy/
├── app/
│   ├── build/
│   └── src/
├── .babelrc
├── .eslintrc.js
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── components/
│   ├── js/
│   └── jsx/
├── package.json
├── webpack.config.js
└── yarn.lock

目录结构介绍

• app/: 包含项目的构建和源代码。
  • build/: 存放构建后的文件。
  • src/: 存放源代码文件。
• .babelrc: Babel 配置文件，用于转换 ES6+ 代码。
• .eslintrc.js: ESLint 配置文件，用于代码风格检查。
• .gitignore: Git 忽略文件配置，指定哪些文件或目录不需要被 Git 管理。
• .npmignore: npm 忽略文件配置，指定哪些文件或目录不需要被发布到 npm。
• LICENSE: 项目的开源许可证文件。
• README.md: 项目的说明文档。
• components/: 包含项目的自定义组件。
  • js/: 存放 JavaScript 组件文件。
  • jsx/: 存放 JSX 组件文件。
• package.json: 项目的 npm 配置文件，包含项目的依赖和脚本。
• webpack.config.js: Webpack 配置文件，用于打包项目。
• yarn.lock: Yarn 锁定文件，用于确保依赖版本的一致性。

2. 项目的启动文件介绍

Marksy 项目的启动文件是 src/index.js。该文件是项目的入口文件，负责初始化项目并启动应用。

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

启动文件介绍

• React: 导入 React 库，用于构建用户界面。
• ReactDOM: 导入 ReactDOM 库，用于将 React 组件渲染到 DOM 中。
• App: 导入 App 组件，这是项目的根组件。
• ReactDOM.render: 将 App 组件渲染到 root 元素中。

3. 项目的配置文件介绍

3.1 .babelrc

Babel 配置文件，用于转换 ES6+ 代码。

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

3.2 .eslintrc.js

ESLint 配置文件，用于代码风格检查。

module.exports = {
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    // 自定义规则
  }
};

3.3 webpack.config.js

Webpack 配置文件，用于打包项目。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

配置文件介绍

• .babelrc: 配置 Babel 预设，支持 ES6+ 和 React。
• .eslintrc.js: 配置 ESLint，继承推荐的规则并启用 React 插件。
• webpack.config.js: 配置 Webpack，指定入口文件、输出文件和模块加载器。

通过以上配置，Marksy 项目可以顺利进行开发和构建。