【山大智云项目日志】（三）源码分析之seahub-frontend

2021SC@SDUSC

frontend源码分析

Seahub的主要代码集中在子文件夹frontend和seahub中。frontend中主要是使用React框架实现的Seafile 的web前端。详细代码见frontend-github

frontend代码结构如下：

奇怪的是这里并不像一般React脚手架建立的项目，这里找不到public静态资源文件夹，所以按照一般情况下的配置结构，无法找到整个前端的入口页面index.html。第一次接触“正经公司写的正经项目”源码，可能是大项目的入口文件设在别的地方，先保留这个疑问继续往下看。
首先从package.json 包的说明文件开始，这里可以从这个文件看到整个项目的入口文件、开发/测试/发布编译的各种命令，也可以了解到项目的依赖库、工具以及框架等等

首先是项目的名称和版本

"name": "seahub-frontend",
  "version": "0.1.0",

由于依赖的包太多，可以直接前往gitbhub文件夹下去查看，这里列举部分：

"dependencies": {  //运行环境依赖包
    "@reach/router": "1.2.0",
    "@seafile/react-image-lightbox": "0.0.1", //seafile组件
    "@seafile/resumablejs": "1.1.16",
    "@seafile/seafile-calendar": "0.0.12",
    "@seafile/seafile-editor": "^0.3.74",
    "react": "^16.8.6",              //react极其组件版本
    "react-app-polyfill": "^2.0.0",
    "react-chartjs-2": "^2.8.0",
    "react-codemirror": "^1.0.0",
    "react-cookies": "^0.1.0",
    "react-dom": "^16.8.6",
    "react-i18next": "^10.12.2",
    "react-mentions": "^3.0.2",
    "react-moment": "^0.7.9",
    "react-qr-code": "^1.0.5",
    "react-responsive": "^6.1.2",
    "react-select": "^2.4.1",
    "reactstrap": "^6.4.0",
    "seafile-js": "0.2.177",
    "socket.io-client": "^2.2.0",  //实时通信包
    "unified": "^7.0.0", 
    "url-parse": "^1.4.3", //urlparse模块中操作URL字符串
    }

从这些依赖集中可以看出主要是引入了seafile官方开发的editor、lightbox、calendar等组件并对应其版本号，resemblejs猜测是一个恢复删除文件的功能组件。可以看到下面引用了很多react框架的一些包。另外还有socket依赖等网络接口或协议需要的包。

文件里还有devDependencies对象，包括在开发状态时整个项目所有的依赖包。

scripts 字段是 package.json 中的另一种元数据功能。scripts 属性接受一个对象，它的值为可以通过 npm run 运行的脚本，其键为实际运行的命令。这些通常是终端命令，我们把它们放入 scripts 字段，可以既可以记录它们又可以轻松地重用。

 "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",
    "dev": "export NODE_ENV=development && node config/server.js"
  }

browserslist 字段
这个配置能够分享目标浏览器和nodejs版本在不同的前端工具。这些工具能根据目标浏览器自动来进行配置

 "browserslist": {
    "production": [  
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 11"
    ],
    "development": [   //支持环境运行的浏览器
      "last 1 chrome version",  //最新版谷歌
      "last 1 firefox version", //最新火狐
      "last 1 safari version",  //最新safari
      "ie 11"                   //最新ie11
    ]
  }

Jest前端测试单源
Jest是一套开源的 JavaScript 测试框架， 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具，是一款几乎零配置的测试框架。

"jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
    ],
    "moduleNameMapper": {   
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [ //模块使用的文件扩展名数组
      "web.js",
      "mjs",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ]
  }

package-lock.json可以理解成对结合了逻辑树和物理树的一个快照（snapshot），里面有明确的各依赖版本号，实际安装的结构，也有逻辑树的结构。这里不必进行过多的分析。

config文件夹下是frontend的配置文件，包含测试单元配置，依赖包配置，环境变量配置，网络协议配置，详细内容会在后面进行分析

server.listen(3000, '0.0.0.0', function (err, result) {
  if (err) {
    console.log(err)
  }

  console.log('Listening at 0.0.0.0:3000')
})
//服务的默认端口是0.0.0.0:3000

script文件夹下包含三个文件：
1.start.js
2.build.js
3.test.js
这三个脚本文件在项目启动时进行启动，初始化并搭建项目运行环境和测试环境。

下面转入核心代码src文件夹下:
这是react框架实现的前端。

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import MarkdownEditor from './markdown-editor';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n-seafile-editor';

import './index.css';

ReactDOM.render(
  <I18nextProvider i18n={ i18n } >
    <MarkdownEditor />
  </I18nextProvider>,
  document.getElementById('root')
);

//ReactDOM.render(）的作用是将<MarkdownEditor />的内容渲染到根“root”中去。MarkdownEditor组件也就是在国际化规范组件</I18nextProvider>中被渲染到页面中了。 
//document.getElementById('root')中的"root"便是index.html中的"root"了这些组件便是引用页面内容了。目前正在寻找根页面，这里应该不叫index.html了。