2021SC@SDUSC

frontend源码分析

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

frontend代码结构如下：

首先从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"
    ]
  }