You want reusable components, elements? Flexible structure?
Separation of concerns, decoupling in your JS Code?
A good strategy is to create an NPM Package.
- Identify the code you would like to decouple.
- create a new project
- create an src folder
- paste the JS or TS files in that folder
- install the missing dependencies like Typescript, TSlint, Material UI
- Write UNIT Tests to test your code before publishing it
I use JEST and to include the relevant Code, add this to your tsconfig.json:
"include": ["src/**/*"],
"exclude": ["node_modules", "**/__tests__/*"]
Before the package is published, you can test it locally:
- In your terminal, run
npm link
- This will compile and create a symbolic link, pointing to another directory/files on your development machine.
- Now include the new package as a dependency. In your terminal, run
npm link <module_name>
- If everything can be imported and used, the test work and you are satisfied, perform
npm unlink --nosave <module_name>
on your main projects directory. This will remove the symbolic link. - Then run
npm unlink
to also remove the global link.
Now you have extracted and published Code as NPM package.