How to manage a large React / Redux project with many independent widgets

I want to have a project structure like this:

./app/package.json
./app/src/index.js

./widget1/package.json
./widget1/src/index.js

./widget2/package.json
./widget2/src/index.js

./widget3/package.json
./widget3/src/index.js

As you can guess, this project is similar to the aggregation of NPM widget subprojects, and the app folder srcis a real application that uses different widget subprojects.

I want a clear and precise separation between widgets, because my current experience shows me that developers tend to introduce unwanted cyclic dependencies between widgets, even if I don't tell them.

ReactJS, 3 JS-: React, JQuery Lodash. 3 , lib, packery, react-slick react-date-picker. , mocha. ( , , React ).

, - widget1 DatePicker, React + Lodash + react-date-picker (npm lib, ) - React + Redux + Normalizr + , react-date-picker

. . Redux, , JS-, .

, 200 package.json ( ).

widget1/src, widget2. , package.json .

Webpack . , , .

, . React Webpack Hot-. , , react-hot-loader npm F5.


, , Java Maven dependencyManagement, POM, - . ( ​​ ), , , . lib .


NPM Webpack?

, , - ?

+4
2

git NPM URL- . , NPM, , NPM .

NPM https://www.npmjs.com/npm/private-packages

+1

https://github.com/n8tz/webpack-inherit,

:

  • npm 1 ;

  • ( - )

  • Webpack ,

  • ...

, .

.

,

0

Source: https://habr.com/ru/post/1626254/


All Articles