├── .gitignore
├── .npmrc
├── .prettierrc
├── CHANGELOG.md
├── LICENSE
├── README.md
├── README_zh-CN.md
├── config
├── env.js
├── getHttpsConfig.js
├── jest
│ ├── cssTransform.js
│ └── fileTransform.js
├── modules.js
├── paths.js
├── pnpTs.js
├── test.loader.js
├── webpack.config.js
└── webpackDevServer.config.js
├── docs
├── README.md
├── README_zh-CN.md
├── annotation
│ ├── README.md
│ ├── common.md
│ ├── format
│ │ └── yolo
│ │ │ ├── yolo.md
│ │ │ └── yolo格式.jpg
│ ├── lineTool.md
│ ├── pointTool.md
│ ├── polygonTool.md
│ ├── rectTool.md
│ ├── tagTool.md
│ └── textTool.md
├── assets
│ ├── annotation-detection-segmentation.gif
│ ├── annotation-line-point-text.gif
│ ├── annotation.png
│ ├── common-config.png
│ ├── config-attribute.png
│ ├── config-textAttribute.png
│ ├── create-project.png
│ ├── export-rect-format.png
│ ├── hotkey.png
│ ├── main.png
│ ├── project-face-detection.png
│ ├── project-folder.png
│ ├── project-step.png
│ ├── projectPlatform.png
│ └── rectTool-common-config.png
└── develop
│ └── README.md
├── electron
├── file.ts
├── ipcEvent.ts
├── main.ts
└── tsconfig.json
├── package.json
├── pnpm-lock.yaml
├── public
├── favicon.ico
├── hm.js
├── icon.icns
├── icon.ico
├── icon.png
├── icon
│ ├── icon_512x512@2x.icns
│ ├── label-app-icon-256.ico
│ ├── label-app-icon-256.png
│ └── label-app-icon-512.png
├── icon256.png
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
└── sensebee.ico
├── scripts
├── build.js
├── dataTransfer.py
├── hm
│ ├── hm-origin.js
│ └── update.js
├── start.js
├── static.js
├── test.js
└── util
│ ├── content.js
│ ├── dir.js
│ ├── file.js
│ ├── mimes.js
│ └── walk.js
├── src
├── Annotation
│ └── index.tsx
├── App.css
├── App.test.tsx
├── App.tsx
├── ProjectPlatform
│ ├── CreateProjectModal
│ │ ├── MultiStep
│ │ │ ├── index.module.scss
│ │ │ └── index.tsx
│ │ ├── SelectFolder.tsx
│ │ ├── SelectTool
│ │ │ └── index.tsx
│ │ ├── TaskStep
│ │ │ ├── index.scss
│ │ │ └── index.tsx
│ │ ├── ToolConfig
│ │ │ ├── DefaultConfig.tsx
│ │ │ ├── PointConfig
│ │ │ │ └── index.tsx
│ │ │ ├── PolygonToolConfig
│ │ │ │ ├── GraphicsPointLimitInput
│ │ │ │ │ └── index.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── RectConfig
│ │ │ │ ├── AttributeConfig
│ │ │ │ │ ├── index.scss
│ │ │ │ │ └── index.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── TagConfig
│ │ │ │ ├── TagInput
│ │ │ │ │ ├── index.module.scss
│ │ │ │ │ └── index.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── TextConfigurable
│ │ │ │ └── index.tsx
│ │ │ ├── TextToolConfig
│ │ │ │ ├── TextConfig
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── TextList
│ │ │ │ │ ├── index.module.scss
│ │ │ │ │ └── index.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── ToolCommonFiled
│ │ │ │ └── index.tsx
│ │ │ ├── index.module.scss
│ │ │ └── publicConfig.ts
│ │ ├── Tools
│ │ │ └── index.tsx
│ │ ├── index.module.scss
│ │ └── index.tsx
│ ├── ProjectList
│ │ ├── ExportData
│ │ │ └── index.tsx
│ │ └── index.tsx
│ ├── index.module.scss
│ └── index.tsx
├── assets
│ ├── color.json
│ ├── editStep
│ │ ├── auditors.svg
│ │ ├── datePicker.svg
│ │ ├── editStep.svg
│ │ ├── icon_lessPoint.svg
│ │ ├── icon_morePoint.svg
│ │ ├── segment_robot.svg
│ │ └── textToolIcons
│ │ │ ├── icon_must.svg
│ │ │ ├── icon_must_a.svg
│ │ │ ├── icon_textSet.svg
│ │ │ └── icon_textSet_a.svg
│ ├── icon_doubleClick.png
│ ├── inside_nodata.svg
│ ├── loading.gif
│ ├── logo.svg
│ └── toolIcon
│ │ ├── icon_line.svg
│ │ ├── icon_point.svg
│ │ ├── icon_polygon.svg
│ │ ├── icon_rect.svg
│ │ ├── icon_step.svg
│ │ ├── icon_tag.svg
│ │ └── icon_text.svg
├── components
│ └── DataLoading
│ │ └── index.tsx
├── constant
│ ├── event.ts
│ ├── file.ts
│ ├── store.ts
│ └── style.ts
├── i18n.ts
├── index.css
├── index.tsx
├── logo.svg
├── mock
│ ├── images
│ │ ├── 100000031654.jpg
│ │ ├── 100000031706.jpg
│ │ ├── 100000031783.jpeg
│ │ ├── 100000031830.jpeg
│ │ ├── 100000031901.jpg
│ │ ├── 100000031909.jpg
│ │ ├── 100000031937.jpg
│ │ ├── 100000032770.jpg
│ │ ├── 100000032774.jpeg
│ │ ├── 100000032780.png
│ │ ├── 100000032792.jpeg
│ │ ├── 100000032799.jpg
│ │ ├── 100000032804.jpg
│ │ ├── 100000032810.jpg
│ │ ├── 100000032814.jpg
│ │ ├── 100000032816.jpg
│ │ ├── 100000032820.jpg
│ │ ├── 100000032826.jpeg
│ │ ├── 500001884.jpg
│ │ ├── 500001885.jpg
│ │ └── 500001886.jpg
│ ├── index.ts
│ └── taskConfig.ts
├── react-app-env.d.ts
├── serviceWorker.ts
├── setupTests.ts
├── store
│ ├── index.tsx
│ └── locale.tsx
└── utils
│ ├── DataTransfer.ts
│ └── tool
│ ├── common.ts
│ ├── editTool.ts
│ ├── task.ts
│ └── uuid.ts
└── tsconfig.json
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 | .idea
8 |
9 | # testing
10 | /coverage
11 |
12 | # production
13 | /build
14 |
15 | # misc
16 | .DS_Store
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 |
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | package-lock.json
26 | /yarn.lock
27 | yarn.lock
28 | /electron/dist
29 | /dist
30 | /out
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 |
2 | electron_mirror=https://npm.taobao.org/mirrors/electron/
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 100,
3 | "singleQuote": true,
4 | "jsxSingleQuote": true,
5 | "trailingComma": "all",
6 | "semicolons": true,
7 | "tabWidth": 2
8 | }
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4 |
5 | ## [0.2.0](https://github.com/open-mmlab/labelbee-client/compare/v0.1.2...v0.2.0) (2022-05-24)
6 |
7 |
8 | ### Features
9 |
10 | * Add Path in annotation ([85480f2](https://github.com/open-mmlab/labelbee-client/commit/85480f2397f5c4bb1ea2258d8c3e18c00254d536))
11 | * Change the value of "file_name" from path to file name in the coco result ([c15b6a5](https://github.com/open-mmlab/labelbee-client/commit/c15b6a5591c80bb89ac7cb640311b91c203ef1bc))
12 | * Check whether there are pictures in the path ([23956e5](https://github.com/open-mmlab/labelbee-client/commit/23956e5b12dc4cd75d49bdfa0472465271b89080))
13 | * Path allows and name editing ([731b5ca](https://github.com/open-mmlab/labelbee-client/commit/731b5caf7d7110ce3e6b30655e87c61e263ddd0a))
14 | * Save page and step to local ([25219da](https://github.com/open-mmlab/labelbee-client/commit/25219daff2dfd250f96e564a11cc83612ad314d0))
15 | * Supplementary submenu ([531ed42](https://github.com/open-mmlab/labelbee-client/commit/531ed420a76e0e64f3b1fe66c7f5207e694181be))
16 |
17 |
18 | ### Bug Fixes
19 |
20 | * The params named projectList is getted error. ([63de7d1](https://github.com/open-mmlab/labelbee-client/commit/63de7d1f40f547a1262e0d7e7d398ba5789a5fd9))
21 | * TrainIDs is not the same with the same config in different project ([369ffc7](https://github.com/open-mmlab/labelbee-client/commit/369ffc7809c652585ab086d8101767400069fd0b))
22 | * Update project error tips ([ffc4793](https://github.com/open-mmlab/labelbee-client/commit/ffc47936a6c9cea9c31423a5f7decf3bf19563c5))
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
16 |
17 | ## Features
18 |
19 | - 📦 Out of the Box, built-in six annotation tools, simple configurations
20 | - 🪵 Flexible combinations, multiple tools can directly rely on each other
21 | - 💻 Multiple operating systems: Mac / Linux / Windows
22 | - 🏁 Support Data Formats
23 |
24 | | | General Data | COCO | Semantic Segmentation Mask |
25 | | ------ | ------------ | ---- | -------------------------- |
26 | | Export | ✔️ | ✔️ | ✔️ |
27 | | Import | ✔️ | ✖ | ✖ |
28 |
29 | ## Download
30 |
31 | [Mac & Windows & Linux](https://github.com/open-mmlab/labelbee-client/releases)
32 |
33 | ## Support Scenes
34 |
35 | - Detection: Detection scenes for vehicles, license plates, pedestrians, faces, industrial parts, etc.
36 | - Classification: Detection of object classification, target characteristics, right and wrong judgments, and other classification scenarios
37 | - Semantic segmentation: Human body segmentation, panoramic segmentation, drivable area segmentation, vehicle segmentation, etc.
38 | - Text transcription: Text detection and recognition of license plates, invoices, insurance policies, signs, etc.
39 | - Contour detection: positioning line scenes such as human contour lines, lane lines, etc.
40 | - Key point detection: positioning scenes such as human face key points, vehicle key points, road edge key points, etc.
41 |
42 |
43 |

44 |
45 |
Detection / Segmentation
46 |
47 |

48 |
49 |
Line / Point / Text
50 |
51 |
52 |
53 | ## Usage
54 |
55 | - [Getting Started](./docs/README.md)
56 |
57 | ## Annotation Format
58 |
59 | ```json
60 | {
61 | "width": 4368,
62 | "height": 2912,
63 | "valid": true,
64 | "rotate": 0,
65 | "step_1": {
66 | "toolName": "rectTool",
67 | "result": [
68 | {
69 | "x": 530.7826086956522,
70 | "y": 1149.217391304348,
71 | "width": 1314.7826086956522,
72 | "height": 1655.6521739130435,
73 | "attribute": "",
74 | "valid": true,
75 | "id": "Rp1x6bZs",
76 | "sourceID": "",
77 | "textAttribute": "",
78 | "order": 1
79 | }
80 | ]
81 | }
82 | }
83 | ```
84 | For details, click to view [LabelBee Annotation Format](./docs/annotation/README.md)
85 |
86 | ## Important
87 | js can't export 8bit unsign Int image, so a python script is provided to solve this problem
88 | - [Script] (https://github.com/open-mmlab/labelbee-client/blob/main/scripts/dataTransfer.py)
89 |
90 | ## Links
91 |
92 | - [LabelBee](https://github.com/open-mmlab/labelbee)(Powered by LabelBee)
93 |
94 | ## LICENSE
95 |
96 | This project is released under the [Apache 2.0 license](./LICENSE).
97 |
--------------------------------------------------------------------------------
/README_zh-CN.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 
5 | LabelBee-Client
6 |
7 | Releases
8 | ·
9 | Usage
10 | ·
11 | English
12 |
13 |
14 |

15 |
16 |
17 |
18 | ## 特性
19 |
20 | - 📦 开箱即用,内置 6 款通用的标注工具,仅需简单配置即可标注
21 | - 🪵 任意搭配,多种工具可直接互相依赖使用$$
22 | - 🏁 支持通用数据,COCO 格式导出,语义分割 Mask 导出
23 | - 💻 全平台支持:Mac / Linux / Windows
24 |
25 | ## 客户端下载
26 |
27 | [Mac & Windows & Linux](https://github.com/open-mmlab/labelbee-client/releases)
28 |
29 | ## 支持场景
30 |
31 |
32 | - 目标检测:车辆、车牌、行人、人脸、工业部件等检测场景
33 | - 目标分类:检测对象分类、目标特征、是非判断等分类场景
34 | - 语义分割:人体分割、全景分割、可行驶区域分割、车辆分割等
35 | - 文本转写:车牌、发票、保单、招牌等文本检测和识别
36 | - 轮廓线检测:人体轮廓线、车道线等定位线场景
37 | - 关键点检测:人脸人体关键点、车辆关键点、路沿关键点等定位场景
38 |
39 |
40 |
41 |

42 |
43 |
Detection / Segmentation
44 |
45 |

46 |
47 |
Line / Point / Text
48 |
49 |
50 |
51 | ## 快速上手
52 |
53 | [基础流程创建](./docs/README.md)
54 |
55 | ## 标注格式说明
56 |
57 | ```json
58 | {
59 | "width": 4368,
60 | "height": 2912,
61 | "valid": true,
62 | "rotate": 0,
63 | "step_1": {
64 | "toolName": "rectTool",
65 | "result": [
66 | {
67 | "x": 530.7826086956522,
68 | "y": 1149.217391304348,
69 | "width": 1314.7826086956522,
70 | "height": 1655.6521739130435,
71 | "attribute": "",
72 | "valid": true,
73 | "id": "Rp1x6bZs",
74 | "sourceID": "",
75 | "textAttribute": "",
76 | "order": 1
77 | }
78 | ]
79 | }
80 | ```
81 | 详细细节请查看 [LabelBee 标注格式](./docs/annotation/README.md)
82 |
83 | ## 友情链接
84 |
85 | - [LabelBee](https://github.com/open-mmlab/labelbee)(本工具都是通过 LabelBee 进行开发)
86 |
87 | ## 开源许可证
88 |
89 | 该项目使用 [Apache 2.0 license](./LICENSE).
90 |
--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const fs = require('fs');
4 | const path = require('path');
5 | const paths = require('./paths');
6 |
7 | // Make sure that including paths.js after env.js will read .env variables.
8 | delete require.cache[require.resolve('./paths')];
9 |
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 | throw new Error(
13 | 'The NODE_ENV environment variable is required but was not specified.'
14 | );
15 | }
16 |
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | const dotenvFiles = [
19 | `${paths.dotenv}.${NODE_ENV}.local`,
20 | `${paths.dotenv}.${NODE_ENV}`,
21 | // Don't include `.env.local` for `test` environment
22 | // since normally you expect tests to produce the same
23 | // results for everyone
24 | NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 | paths.dotenv,
26 | ].filter(Boolean);
27 |
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set. Variable expansion is supported in .env files.
31 | // https://github.com/motdotla/dotenv
32 | // https://github.com/motdotla/dotenv-expand
33 | dotenvFiles.forEach(dotenvFile => {
34 | if (fs.existsSync(dotenvFile)) {
35 | require('dotenv-expand')(
36 | require('dotenv').config({
37 | path: dotenvFile,
38 | })
39 | );
40 | }
41 | });
42 |
43 | // We support resolving modules according to `NODE_PATH`.
44 | // This lets you use absolute paths in imports inside large monorepos:
45 | // https://github.com/facebook/create-react-app/issues/253.
46 | // It works similar to `NODE_PATH` in Node itself:
47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49 | // Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
50 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
51 | // We also resolve them to make sure all tools using them work consistently.
52 | const appDirectory = fs.realpathSync(process.cwd());
53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
54 | .split(path.delimiter)
55 | .filter(folder => folder && !path.isAbsolute(folder))
56 | .map(folder => path.resolve(appDirectory, folder))
57 | .join(path.delimiter);
58 |
59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60 | // injected into the application via DefinePlugin in webpack configuration.
61 | const REACT_APP = /^REACT_APP_/i;
62 |
63 | function getClientEnvironment(publicUrl) {
64 | const raw = Object.keys(process.env)
65 | .filter(key => REACT_APP.test(key))
66 | .reduce(
67 | (env, key) => {
68 | env[key] = process.env[key];
69 | return env;
70 | },
71 | {
72 | // Useful for determining whether we’re running in production mode.
73 | // Most importantly, it switches React into the correct mode.
74 | NODE_ENV: process.env.NODE_ENV || 'development',
75 | // Useful for resolving the correct path to static assets in `public`.
76 | // For example,
.
77 | // This should only be used as an escape hatch. Normally you would put
78 | // images into the `src` and `import` them in code to get their paths.
79 | PUBLIC_URL: publicUrl,
80 | // We support configuring the sockjs pathname during development.
81 | // These settings let a developer run multiple simultaneous projects.
82 | // They are used as the connection `hostname`, `pathname` and `port`
83 | // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
84 | // and `sockPort` options in webpack-dev-server.
85 | WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
86 | WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
87 | WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
88 | }
89 | );
90 | // Stringify all values so we can feed into webpack DefinePlugin
91 | const stringified = {
92 | 'process.env': Object.keys(raw).reduce((env, key) => {
93 | env[key] = JSON.stringify(raw[key]);
94 | return env;
95 | }, {}),
96 | };
97 |
98 | return { raw, stringified };
99 | }
100 |
101 | module.exports = getClientEnvironment;
102 |
--------------------------------------------------------------------------------
/config/getHttpsConfig.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const fs = require('fs');
4 | const path = require('path');
5 | const crypto = require('crypto');
6 | const chalk = require('react-dev-utils/chalk');
7 | const paths = require('./paths');
8 |
9 | // Ensure the certificate and key provided are valid and if not
10 | // throw an easy to debug error
11 | function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
12 | let encrypted;
13 | try {
14 | // publicEncrypt will throw an error with an invalid cert
15 | encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
16 | } catch (err) {
17 | throw new Error(
18 | `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
19 | );
20 | }
21 |
22 | try {
23 | // privateDecrypt will throw an error with an invalid key
24 | crypto.privateDecrypt(key, encrypted);
25 | } catch (err) {
26 | throw new Error(
27 | `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
28 | err.message
29 | }`
30 | );
31 | }
32 | }
33 |
34 | // Read file and throw an error if it doesn't exist
35 | function readEnvFile(file, type) {
36 | if (!fs.existsSync(file)) {
37 | throw new Error(
38 | `You specified ${chalk.cyan(
39 | type
40 | )} in your env, but the file "${chalk.yellow(file)}" can't be found.`
41 | );
42 | }
43 | return fs.readFileSync(file);
44 | }
45 |
46 | // Get the https config
47 | // Return cert files if provided in env, otherwise just true or false
48 | function getHttpsConfig() {
49 | const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
50 | const isHttps = HTTPS === 'true';
51 |
52 | if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
53 | const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
54 | const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
55 | const config = {
56 | cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
57 | key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
58 | };
59 |
60 | validateKeyAndCerts({ ...config, keyFile, crtFile });
61 | return config;
62 | }
63 | return isHttps;
64 | }
65 |
66 | module.exports = getHttpsConfig;
67 |
--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | // This is a custom Jest transformer turning style imports into empty objects.
4 | // http://facebook.github.io/jest/docs/en/webpack.html
5 |
6 | module.exports = {
7 | process() {
8 | return 'module.exports = {};';
9 | },
10 | getCacheKey() {
11 | // The output is always the same.
12 | return 'cssTransform';
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 | const camelcase = require('camelcase');
5 |
6 | // This is a custom Jest transformer turning file imports into filenames.
7 | // http://facebook.github.io/jest/docs/en/webpack.html
8 |
9 | module.exports = {
10 | process(src, filename) {
11 | const assetFilename = JSON.stringify(path.basename(filename));
12 |
13 | if (filename.match(/\.svg$/)) {
14 | // Based on how SVGR generates a component name:
15 | // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
16 | const pascalCaseFilename = camelcase(path.parse(filename).name, {
17 | pascalCase: true,
18 | });
19 | const componentName = `Svg${pascalCaseFilename}`;
20 | return `const React = require('react');
21 | module.exports = {
22 | __esModule: true,
23 | default: ${assetFilename},
24 | ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
25 | return {
26 | $$typeof: Symbol.for('react.element'),
27 | type: 'svg',
28 | ref: ref,
29 | key: null,
30 | props: Object.assign({}, props, {
31 | children: ${assetFilename}
32 | })
33 | };
34 | }),
35 | };`;
36 | }
37 |
38 | return `module.exports = ${assetFilename};`;
39 | },
40 | };
41 |
--------------------------------------------------------------------------------
/config/modules.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const fs = require('fs');
4 | const path = require('path');
5 | const paths = require('./paths');
6 | const chalk = require('react-dev-utils/chalk');
7 | const resolve = require('resolve');
8 |
9 | /**
10 | * Get additional module paths based on the baseUrl of a compilerOptions object.
11 | *
12 | * @param {Object} options
13 | */
14 | function getAdditionalModulePaths(options = {}) {
15 | const baseUrl = options.baseUrl;
16 |
17 | // We need to explicitly check for null and undefined (and not a falsy value) because
18 | // TypeScript treats an empty string as `.`.
19 | if (baseUrl == null) {
20 | // If there's no baseUrl set we respect NODE_PATH
21 | // Note that NODE_PATH is deprecated and will be removed
22 | // in the next major release of create-react-app.
23 |
24 | const nodePath = process.env.NODE_PATH || '';
25 | return nodePath.split(path.delimiter).filter(Boolean);
26 | }
27 |
28 | const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
29 |
30 | // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
31 | // the default behavior.
32 | if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
33 | return null;
34 | }
35 |
36 | // Allow the user set the `baseUrl` to `appSrc`.
37 | if (path.relative(paths.appSrc, baseUrlResolved) === '') {
38 | return [paths.appSrc];
39 | }
40 |
41 | // If the path is equal to the root directory we ignore it here.
42 | // We don't want to allow importing from the root directly as source files are
43 | // not transpiled outside of `src`. We do allow importing them with the
44 | // absolute path (e.g. `src/Components/Button.js`) but we set that up with
45 | // an alias.
46 | if (path.relative(paths.appPath, baseUrlResolved) === '') {
47 | return null;
48 | }
49 |
50 | // Otherwise, throw an error.
51 | throw new Error(
52 | chalk.red.bold(
53 | "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
54 | ' Create React App does not support other values at this time.'
55 | )
56 | );
57 | }
58 |
59 | /**
60 | * Get webpack aliases based on the baseUrl of a compilerOptions object.
61 | *
62 | * @param {*} options
63 | */
64 | function getWebpackAliases(options = {}) {
65 | const baseUrl = options.baseUrl;
66 |
67 | if (!baseUrl) {
68 | return {};
69 | }
70 |
71 | const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
72 |
73 | if (path.relative(paths.appPath, baseUrlResolved) === '') {
74 | return {
75 | src: paths.appSrc,
76 | };
77 | }
78 | }
79 |
80 | /**
81 | * Get jest aliases based on the baseUrl of a compilerOptions object.
82 | *
83 | * @param {*} options
84 | */
85 | function getJestAliases(options = {}) {
86 | const baseUrl = options.baseUrl;
87 |
88 | if (!baseUrl) {
89 | return {};
90 | }
91 |
92 | const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
93 |
94 | if (path.relative(paths.appPath, baseUrlResolved) === '') {
95 | return {
96 | '^src/(.*)$': '/src/$1',
97 | };
98 | }
99 | }
100 |
101 | function getModules() {
102 | // Check if TypeScript is setup
103 | const hasTsConfig = fs.existsSync(paths.appTsConfig);
104 | const hasJsConfig = fs.existsSync(paths.appJsConfig);
105 |
106 | if (hasTsConfig && hasJsConfig) {
107 | throw new Error(
108 | 'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
109 | );
110 | }
111 |
112 | let config;
113 |
114 | // If there's a tsconfig.json we assume it's a
115 | // TypeScript project and set up the config
116 | // based on tsconfig.json
117 | if (hasTsConfig) {
118 | const ts = require(resolve.sync('typescript', {
119 | basedir: paths.appNodeModules,
120 | }));
121 | config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
122 | // Otherwise we'll check if there is jsconfig.json
123 | // for non TS projects.
124 | } else if (hasJsConfig) {
125 | config = require(paths.appJsConfig);
126 | }
127 |
128 | config = config || {};
129 | const options = config.compilerOptions || {};
130 |
131 | const additionalModulePaths = getAdditionalModulePaths(options);
132 |
133 | return {
134 | additionalModulePaths: additionalModulePaths,
135 | webpackAliases: getWebpackAliases(options),
136 | jestAliases: getJestAliases(options),
137 | hasTsConfig,
138 | };
139 | }
140 |
141 | module.exports = getModules();
142 |
--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 | const fs = require('fs');
5 | const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
6 |
7 | // Make sure any symlinks in the project folder are resolved:
8 | // https://github.com/facebook/create-react-app/issues/637
9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
11 |
12 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
13 | // "public path" at which the app is served.
14 | // webpack needs to know it to put the right
33 | LabelBee-Client
34 |
35 |
36 |
37 |
38 |
39 |
49 |
50 |