Muise demo目录结构详解

一、Muise demo下的目录结构

整体目录结构如下：

1.1 core目录

core目录包含主要的核心代码，用于管理数据和处理操作。它包含了实验室管理系统的核心功能和共享组件，包括用户认证、权限管理、数据库操作、日志记录、异常处理等。此外，它还包含了一些实用工具和公共库，用于简化开发过程。

ErrorBoundary是用于处理React组件内部的错误的组件。当组件发生错误时，可能会导致整个应用崩溃或出现其他异常情况。为了避免这种情况的发生，可以使用ErrorBoundary来捕获并处理组件内部的错误，从而保证整个应用的稳定性。
ErrorBoundary是一个高阶组件，它可以包装其他组件。当被包装的组件发生错误时，ErrorBoundary会显示一个错误信息，同时记录错误信息并发送到后端进行处理。

//严格定义CSS样式
import { CSSProperties } from 'rax';

interface IProps {
  componentStack: string;
  error: Error;
}

//定义toTitle方法，将错误信息转成字符串形式
const toTitle = (error: Error): string => {
  return `${error.toString()}`;
};

const style = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  margin: '100px 0',
  color: '#ed3131',
} as CSSProperties;

//有错误则返回一个UI组件
const ErrorBoundaryFallback = ({ error }: IProps) => {
  return (
    <div style={style} title={toTitle(error)}>
      <svg
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="843"
        width="60"
        height="60"
      >
        <path
          d="M1024 512C1024 229.23 794.77 0 512 0S0 229.23 0 512s229.23 512 512 512c117.41 0 228.826-39.669 318.768-111.313 10.79-8.595 12.569-24.308 3.975-35.097-8.594-10.789-24.308-12.568-35.097-3.974C718.47 938.277 618.002 974.049 512 974.049 256.818 974.049 49.951 767.182 49.951 512S256.818 49.951 512 49.951 974.049 256.818 974.049 512c0 87.493-24.334 171.337-69.578 243.96-7.294 11.708-3.716 27.112 7.992 34.405 11.707 7.294 27.11 3.716 34.405-7.991C997.014 701.88 1024 608.898 1024 512z"
          p-id="844"
          fill="#cdcdcd"
        />
        <path
          d="M337.17 499.512c34.485 0 62.44-27.955 62.44-62.439s-27.955-62.439-62.44-62.439c-34.483 0-62.438 27.955-62.438 62.44 0 34.483 27.955 62.438 62.439 62.438z m374.635 0c34.484 0 62.439-27.955 62.439-62.439s-27.955-62.439-62.44-62.439c-34.483 0-62.438 27.955-62.438 62.44 0 34.483 27.955 62.438 62.439 62.438zM352.788 704.785c43.377-34.702 100.364-55.425 171.7-55.425 71.336 0 128.322 20.723 171.7 55.425 26.513 21.21 42.695 42.786 50.444 58.284 6.168 12.337 1.168 27.34-11.17 33.508-12.337 6.169-27.34 1.168-33.508-11.17-0.918-1.834-3.462-6.024-7.788-11.793-7.564-10.084-17.239-20.269-29.183-29.824-34.671-27.737-80.71-44.478-140.495-44.478-59.786 0-105.824 16.74-140.496 44.478-11.944 9.555-21.619 19.74-29.182 29.824-4.327 5.769-6.87 9.959-7.788 11.794-6.169 12.337-21.171 17.338-33.509 11.17-12.337-6.17-17.338-21.172-11.169-33.509 7.75-15.498 23.931-37.074 50.444-58.284z"
          p-id="845"
          fill="#cdcdcd"
        />
      </svg>
      <h3>Oops! Something went wrong.</h3>
    </div>
  );
};

export default ErrorBoundaryFallback;

ErrorBoundaryFallback.tsx：这个文件定义了ErrorBoundary组件的备用UI界面。当被包装的组件发生错误时，ErrorBoundary会显示这个备用UI界面，提示用户出现了错误，同时记录错误信息并发送到后端进行处理。ErrorBoundaryFallback.tsx文件中定义了一些样式和内容，可以根据实际需求进行定制。

// reference： https://github.com/bvaughn/react-error-boundary
/* eslint @typescript-eslint/explicit-member-accessibility:0 */
import { Component, ComponentType, RaxNode } from 'rax';
import ErrorBoundaryFallback from './ErrorBoundaryFallback';

interface IProps {
  children?: RaxNode;
  Fallback?: ComponentType<any>;
  onError?: Function;
}

interface IState {
  error?: Error | null;
}

//定义了ErrorBoundary组件，继承了Rax框架的Component类，并实现了componentDidCatch()和render()方法
class ErrorBoundary extends Component<IProps, IState> {
  static defaultProps: IProps = {
    Fallback: ErrorBoundaryFallback,
  };

  constructor(props) {
    super(props);
    this.state = {
      error: null,
    };
  }
  
//当被包装的组件发生错误时，会触发componentDidCatch()，将错误信息保存到error属性中，并调用onError()方法处理错误
  componentDidCatch(error: Error): void {
    const { onError } = this.props;

    if (typeof onError === 'function') {
      try {
        // can’t reproduce missing info in development environment.
        onError.call(this, error);
      } catch (ignoredError) {
        // ignored error
      }
    }

    // Update state so the next render will show the fallback UI.
    this.setState({ error });
  }

//如果error属性不为空且Fallback属性是一个有效的组件，那么就会渲染Fallback组件，显示备用UI界面
  render() {
    const { children, Fallback } = this.props;
    const { error } = this.state;
    // render fallback UI if there is error
    if (error !== null && typeof Fallback === 'function') {
      return <Fallback error={error} />;
    }

    return children || null;
  }
}

export default ErrorBoundary;

index.tsx：这个文件是ErrorBoundary组件的主文件，定义了ErrorBoundary组件的核心逻辑。它包含了React组件的定义和生命周期方法，同时还定义了一些方法用于记录和发送错误信息。当被包装的组件发生错误时，ErrorBoundary会调用这些方法记录错误信息，并显示备用UI界面。

.eslintrc.js

.eslintrc.js文件是一个ESLint配置文件，用于配置代码规范和约束。

//引入了@iceworks/spec库中提供的getESLintConfig函数，用于获取基础的ESLint配置
const { getESLintConfig } = require('@iceworks/spec');

// https://www.npmjs.com/package/@iceworks/spec
//将获取到的ESLint配置作为一个模块导出，并使用rax-ts作为参数传入：rax-ts是一个指定了ESLint规则集的参数
//getESLintConfig函数，以获取一个针对Rax框架和TypeScript的ESLint配置
module.exports = getESLintConfig('rax-ts', {
  rules: {
  //关闭了对React元素属性的未知属性（未定义的属性）的检查
    'react/no-unknown-property': 'off',
    // muise自定义eslint插件
    //启用了一个自定义的ESLint插件，用于检查代码中是否使用了document等危险的全局变量
    '@ali/muise/document-prohibit': 'error',
    //启用了另一个自定义的ESLint插件，用于检查代码中是否没有处理异常情况而导致了崩溃
    '@ali/muise/crash-detection': 'error',
  },
  plugins: ['@ali/muise'],
});

.eslintignore

.eslintignore是用于忽略某些文件或目录的ESLint配置文件。在该文件中，开发者可以列出不需要进行代码检查的文件或目录，以避免ESLint对这些文件进行无用的检查。
与.gitignore不同，.eslintignore文件只在进行ESLint代码检查时起作用，并不影响代码的版本控制或部署。

.prettierignore和.prettierrc.js

.prettierignore和.prettierrc.js都是用于配置和定制Prettier工具（一个代码格式化工具）的文件，但它们的作用和使用方式是不同的。

.prettierignore文件是用于忽略某些文件或目录的Prettier配置文件。在该文件中，开发者可以列出不需要进行代码格式化的文件或目录，以避免Prettier对这些文件进行无用的格式化。
与.prettierrc.js不同，.prettierignore文件只影响Prettier格式化时的文件过滤，不会改变Prettier的格式化规则或选项。

.prettierrc.js文件是用于配置Prettier的格式化规则和选项的文件。在该文件中，开发者可以自定义Prettier的一些格式化规则和选项，以符合自己的代码风格和需求。

//引用@iceworks/spec库中的getPrettierConfig函数来获取基本的Prettier配置
const { getPrettierConfig } = require('@iceworks/spec');

//Prettier配置作为一个模块导出，并使用rax作为参数传入里，rax表示使用针对Rax框架的Prettier配置集。这个配置集包含了一些规则和选项
module.exports = getPrettierConfig('rax', {
//organizeImportsSkipDestructiveCodeActions: true：启用了一个自定义的Prettier选项，用于跳过有破坏性的代码重组操作
  organizeImportsSkipDestructiveCodeActions: true,
  plugins: [
  //重组和排序JavaScript代码中的模块引入语句
    require.resolve('prettier-plugin-organize-imports'),
    //调整和规范CSS代码中的样式顺序，自定义CSS属性的顺序和分组方式
    require.resolve('prettier-plugin-style-order'),
    //格式化和美化package.json文件，可以对文件中的键值对进行排序、添加缩进、移除注释等操作
    require.resolve('prettier-plugin-packagejson'),
  ],
});

其中，prettier-plugin-organize-imports重组和排序JavaScript代码中的模块引入语句，通常是按照以下的方式进行重组和排序：
按照引入的模块类型进行分组，例如将import和require语句分别进行分组。
将同一模块类型的语句按照字母顺序进行排序，例如按照模块名称的首字母或全名进行排序。
将不同模块类型的引入语句按照一定的顺序进行排列，例如将import语句排在require语句前面。

prettier-plugin-style-order这个Prettier插件可以通过自定义styleOrder选项来调整和规范CSS代码中的样式顺序，以达到统一代码风格和提高可读性的目的。具体的做法是：
在.prettierrc.js中配置prettier-plugin-style-order插件，并设置styleOrder选项。
module.exports = {
plugins: [require.resolve(‘prettier-plugin-style-order’)],
styleOrder: [‘position’, ‘display’, ‘z-index’, ‘flex’, ‘width’, ‘height’, ‘margin’, ‘padding’, ‘border’, ‘background’, ‘color’, ‘text’, ‘animation’],
};
在styleOrder选项中设置自定义的CSS属性顺序和分组方式，以达到自己的代码风格和需求。

.stylelintignore和.stylelintrc.js

用于配置和定制Stylelint工具的文件。

.stylelintignore文件是用于忽略Stylelint对某些文件或目录的检查的配置文件。在该文件中，开发者可以列出不需要进行代码检查的文件或目录，以避免Stylelint对这些文件进行无用的检查。
与.stylelintrc.js不同，.stylelintignore文件只影响Stylelint检查时的文件过滤，不会改变Stylelint的检查规则或选项。

.stylelintrc.js文件是用于配置Stylelint的检查规则和选项的文件。在该文件中，开发者可以自定义Stylelint的一些检查规则和选项，以符合自己的代码风格和需求。

入口文件

src/pages/index.js

在Muise项目中，src目录下的pages目录包含了所有的页面组件，用于展示和呈现应用程序的功能和界面。其中，pages目录下的card和muise-theme目录分别表示不同的页面类型，具体含义如下：

card页面类型：这个页面类型表示卡片式的展示页面，通常用于展示一些简单的信息、图片或封面等。这个页面类型通常包含一个卡片容器和一些卡片项，每个卡片项通常包含一个标题、一个图像和一些描述信息等，可以通过轮播或滚动的方式展示多个卡片项。

muise-theme页面类型：这个页面类型表示音乐主题的展示页面，通常用于展示一些音乐相关的信息、图片或封面等。这个页面类型通常包含一个音乐主题容器和一些主题项，每个主题项通常包含一个封面图像、一个标题和一些描述信息等，可以通过轮播或滚动的方式展示多个主题项。