Au fil des ans, en tant que programmeur, j'ai examinĂ© peut-ĂȘtre des centaines de bases de code. Trop pour ĂȘtre prĂ©cis. J'ai beaucoup de mal Ă comprendre oĂč se trouve le code significatif dans la plupart des cas. Habituellement, une demande de conseils sur ce Ă quoi je dois prĂȘter attention et les instructions contenues dans les billets me poussent Ă avancer. Lentement mais sĂ»rement, je comprendrai ce que fait le code. Et vous comprendrez aussi. Certaines personnes le font mieux, et certaines personnes le font lentement. Vous ne devriez pas en avoir honte. Dans la plupart des cas, le code est complexe. Mais j'ai trouvĂ© un outil simple pour vous faciliter la tĂąche.Cela s'appelle la complexitĂ© du code et vous pouvez l'utiliser comme
ceci:
npx code-complexity . --limit 20 --sort ratio # --filter '**/*.js',
Il imprimera une sortie similaire Ă celle-ci:
| déposer | complexité | baratte | rapport |
|---|---|---|---|
| src / cli.ts | 103 | 8 | 824 |
| test / code-complexité.test.ts | 107 | 7 | 749 |
| .idea / workspace.xml | 123 | 6 | 738 |
. , , . . , , .
(complexity) (churn), . , , .
?
. , . . , , , . , .
. , . . , . sloc. . : , , .
, -, -. , , , , , .
?
. -. â , . ?
, , , . - ? git' , . , , , . , . , , , , .
+ ?
, , . , , . , . . , .
. , . , . . , , - unit-. , . TypeScript Flow .
Unit- â , , . , , , , , . , unit- , . , . , . , , . ? .
?
. . , , .
. , , . , : - . , , , .
. , , , . , . . , . , .
?
â . , , , , unit, e2e , . , -, , , . . . Node.js, , Node.js. console.log
, . , . JavaScript TypeScript debugger
, , , Node.js . IDE , . , Visual Studio Code Node.js IDE. Node.js VS Code .
â . , , "" "". .
, , , .
Blitz.js
Blitz.js â , Node.js. Ruby on Rails JavaScript/TypeScript. , , .
, , :
npx code-complexity . --limit 20 --sort ratio
| file | complexity | churn | ratio |
|---|---|---|---|
| nextjs/packages/next/compiled/webpack/bundle5.js | 91501 | 1 | 91501 |
| nextjs/packages/next/compiled/webpack/bundle5.js | 91501 | 1 | 91501 |
| nextjs/packages/next/compiled/webpack/bundle4.js | 74436 | 1 | 74436 |
| packages/cli/src/commands/generate.ts | 228 | 28 | 6384 |
| packages/cli/src/commands/new.ts | 177 | 35 | 6195 |
| packages/generator/src/generators/app-generator.ts | 235 | 23 | 5405 |
| packages/generator/src/generator.ts | 283 | 19 | 5377 |
| packages/server/src/stages/rpc/index.ts | 184 | 28 | 5152 |
| packages/server/test/dev.test.ts | 190 | 27 | 5130 |
| packages/core/src/types.ts | 160 | 28 | 4480 |
| packages/server/src/next-utils.ts | 176 | 25 | 4400 |
| packages/generator/templates/app/app/pages/index.tsx | 240 | 18 | 4320 |
| packages/server/src/config.ts | 116 | 37 | 4292 |
| packages/core/src/use-query-hooks.ts | 184 | 22 | 4048 |
| nextjs/test/integration/file-serving/test/index.test.js | 3561 | 1 | 3561 |
| examples/auth/app/pages/index.tsx | 210 | 16 | 3360 |
| packages/cli/src/commands/db.ts | 75 | 44 | 3300 |
| .github/workflows/main.yml | 132 | 24 | 3168 |
| packages/cli/test/commands/new.test.ts | 141 | 19 | 2679 |
| examples/store/app/pages/index.tsx | 181 | 14 | 2534 |
| packages/display/src/index.ts | 158 | 16 | 2528 |
, , (, ), .
, :
- packages/cli
- packages/generator
- packages/server
- packages/core
, , , , . , packages/core
, , . , , , Blitz.
React.js
React.js â , - . , . .
npx code-complexity . --limit 20 --sort ratio
:
| file | complexity | churn | ratio |
|---|---|---|---|
| packages/eslint-plugin-react-hooks/**tests**/ESLintRuleExhaustiveDeps-test.js | 7742 | 51 | 394842 |
| packages/react/src/**tests**/ReactProfiler-test.internal.js | 4002 | 95 | 380190 |
| packages/react-reconciler/src/ReactFiberWorkLoop.new.js | 2373 | 139 | 329847 |
| packages/react-reconciler/src/ReactFiberWorkLoop.old.js | 2373 | 114 | 270522 |
| packages/react-dom/src/server/ReactPartialRenderer.js | 1379 | 122 | 168238 |
| packages/react-reconciler/src/ReactFiberCommitWork.new.js | 2262 | 71 | 160602 |
| packages/react-devtools-shared/src/backend/renderer.js | 2952 | 54 | 159408 |
| packages/react-reconciler/src/ReactFiberBeginWork.new.js | 2903 | 53 | 153859 |
| scripts/rollup/bundles.js | 760 | 199 | 151240 |
| packages/react-reconciler/src/ReactFiberHooks.new.js | 2622 | 56 | 146832 |
| packages/react-dom/src/client/ReactDOMHostConfig.js | 1018 | 140 | 142520 |
| packages/react-reconciler/src/ReactFiberHooks.old.js | 2622 | 50 | 131100 |
| packages/react-reconciler/src/**tests**/ReactHooks-test.internal.js | 1641 | 74 | 121434 |
| packages/react-dom/src/**tests**/ReactDOMComponent-test.js | 2346 | 51 | 119646 |
| packages/react-dom/src/**tests**/ReactDOMServerPartialHydration-test.internal.js | 2150 | 49 | 105350 |
| packages/react-noop-renderer/src/createReactNoop.js | 966 | 109 | 105294 |
| packages/react-reconciler/src/ReactFiberCommitWork.old.js | 2262 | 46 | 104052 |
| packages/react-reconciler/src/ReactFiberBeginWork.old.js | 2903 | 35 | 101605 |
| packages/react-reconciler/src/**tests**/ReactIncrementalErrorHandling-test.internal.js | 1532 | 62 | 94984 |
| packages/react-refresh/src/**tests**/ReactFresh-test.js | 3165 | 29 | 91785 |
, , , :
- packages/react-dom
- packages/react-reconciler
React Fiber , react-dom React. React , , .
Venom â TypeScript Whatsapp
Venom â Whatsapp. . , . :
npx code-complexity . --limit 20 --sort ratio
| file | complexity | churn | ratio |
|---|---|---|---|
| src/lib/jsQR/jsQR.js | 9760 | 5 | 48800 |
| src/lib/wapi/wapi.js | 474 | 44 | 20856 |
| src/api/layers/sender.layer.ts | 546 | 36 | 19656 |
| src/lib/wapi/store/store-objects.js | 362 | 24 | 8688 |
| src/controllers/initializer.ts | 178 | 48 | 8544 |
| src/lib/wapi/jssha/index.js | 1204 | 5 | 6020 |
| src/api/layers/retriever.layer.ts | 171 | 29 | 4959 |
| src/types/WAPI.d.ts | 203 | 24 | 4872 |
| src/api/layers/host.layer.ts | 258 | 17 | 4386 |
| src/api/layers/listener.layer.ts | 206 | 21 | 4326 |
| src/controllers/browser.ts | 141 | 29 | 4089 |
| src/controllers/auth.ts | 192 | 21 | 4032 |
| src/api/model/enum/definitions.ts | 589 | 6 | 3534 |
| src/api/whatsapp.ts | 95 | 30 | 2850 |
| src/lib/wapi/functions/index.js | 97 | 24 | 2328 |
| src/api/layers/profile.layer.ts | 82 | 22 | 1804 |
| src/lib/wapi/business/send-message-with-buttons.js | 323 | 5 | 1615 |
| src/api/layers/group.layer.ts | 115 | 14 | 1610 |
| src/api/layers/controls.layer.ts | 76 | 20 | 1520 |
| src/api/model/message.ts | 114 | 11 | 1254 |
, , :
- src/lib
- src/api
- src/controllers
, src/lib
. , , .
src/api/layers/sender.layer.ts
src/api/layers/retriever.layer.ts
, . , , . , .
?
, : Software Design X-Rays (Adam Tornhill). , : . . , - , . , , , "" , . â , .
Software Design X-Rays
, , , . , .
code-complexity JavaScript TypeScript. , Java, C#, Python PHP , , , code-maat. , , .
, .
J'espĂšre que vous avez apprĂ©ciĂ© cet article et vous avez rendu la vie un peu plus facile. Entrer dans une nouvelle base de code est difficile, et en particulier dans le monde en constante Ă©volution de JavaScript, il est difficile de suivre le rythme. Avec les outils et les processus prĂ©sentĂ©s dans cet article, vous trouverez peut-ĂȘtre plus facile de s'intĂ©grer dans la nouvelle base de code. N'hĂ©sitez pas Ă partager cet article avec vos collĂšgues et Ă leur parler des techniques que vous utilisez. La plupart des dĂ©veloppeurs que je connais ne connaissent pas l'analyse des flux et de la complexitĂ©, et cela peut ĂȘtre trĂšs utile pour tout le monde. Alors partagez-le!