2021SC@SDUSC
frontend source code analysis
The main code of seahub is concentrated in the subfolders frontend and seahub. Frontend mainly uses the React framework to implement the web front end of Seafile. See for detailed code frontend-github
frontend code structure is as follows:
First from package.json At first, from this file, you can see the entry file of the whole project, various commands for development / test / release compilation, as well as the dependent libraries, tools and frameworks of the project
The first is the name and version of the project
"name": "seahub-frontend", "version": "0.1.0",
Because there are too many dependent packages, you can go directly to the gitbhub folder to view them. Here are some examples:
"dependencies": { //Runtime environment dependent package "@reach/router": "1.2.0", "@seafile/react-image-lightbox": "0.0.1", //seafile component "@seafile/resumablejs": "1.1.16", "@seafile/seafile-calendar": "0.0.12", "@seafile/seafile-editor": "^0.3.74", "react": "^16.8.6", //react component version "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", //Real time communication packet "unified": "^7.0.0", "url-parse": "^1.4.3", //URL string in urlparse module }
From these dependency sets, it can be seen that the editor, lightbox, calendar and other components officially developed by seafile are mainly introduced and corresponding to their version numbers. Remeblejs guesses that it is a functional component for restoring and deleting files. You can see that the following packages refer to many react frameworks. In addition, there are packets required by network interfaces or protocols such as socket dependency.
There is also a devDependencies object in the file, including all dependent packages of the whole project in the development state.
The scripts field is another metadata function in package.json. The scripts attribute accepts an object. Its value is the script that can be run through npm run, and its key is the actually run command. These are usually terminal commands. We put them in the scripts field, which can be recorded and reused easily.
"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" }
Browserlist field
This configuration can share the target browser and nodejs version in different front-end tools. These tools can be configured automatically according to the target browser
"browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all", "ie 11" ], "development": [ //Browser that supports environment operation "last 1 chrome version", //Latest version of Google "last 1 firefox version", //Latest Firefox "last 1 safari version", //Latest safari "ie 11" //Latest ie11 ] }
Jest front end test single source
Jest is a set of open source JavaScript testing framework, which automatically integrates all testing tools required by developers such as assertion, JSDom and coverage report. It is a testing framework with almost zero configuration.
"jest": { "collectCoverageFrom": [ "src/**/*." ], "setupFiles": [ "<rootDir>/config/polyfills.js" ], "testMatch": [ "<rootDir>/src/**/__tests__/**/*.", "<rootDir>/src/**/?(*.)(spec|test)." ], "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": [ //Array of file extensions used by the module "web.js", "mjs", "js", "json", "web.jsx", "jsx", "node" ] }