10

I have a git repository with a ReactJS project (built with create-react-app) that has a git submodule. I want to transfer the code of the submodule currently located in src/my-git-submodule folder, to a npm package with the name @company/my-git-submodule.

I created new local directory outside of the project:

  • username/WebstormProjects/my-git-submodule <- this one
  • username/WebstormProjects/reactjs-project

Copied the code from the git submodule and ran npm init, creating a package.json with the details of the package. (Not sure if it's relevant, but it's hosted in a private registry and the reactjs project is configured to fetch packages from it -- using .yarnrc config file).

Code is written using ES6, so I installed babel, webpack and the tools/plugins/presets needed for building compatible code that can be used in my ReactJS website.

I added the new npm package as dependency and it is working fine. I can import components, functions and other stuff I have in the package in my ReactJS website.

It works as expected, but if I want to change something to the package and test it in my project, I have to publish new version, then in the reactjs project to update it, and then test it (I have to make some adjustments because some of its features need to be changed since it doesnt reside insrc folder of the project).

This process takes time and really slows down the development process of both the reactjs project and the npm package.

I tried adding the npm package directly from the local folder, but I still need to run yarn add ../my-git-submodule each time I change the code and build it with babel + webpack.

Ivanka Todorova
  • 9,964
  • 16
  • 66
  • 103
  • You want to build a "monorepo" (a repo that contains multiple packages). Usually, you use `lerna` and `yarn workspaces` for that. For simplicity, you usually host all packages in a singular git repository. All the big names do it (checkout the github structure of `Webpack`, `babel` etc.). In order to bring things together, you might also have to add `craco` to override your CRA webpack config. Contact me, if you think that this is helpful. I don't want to waste my time writing a complex answer, if it does not help anyone :) – Domi May 18 '21 at 09:56
  • #1 is mandatory to use git sub modules? It is easier to maintain when each package.json has its own git repository. #2 What about the unit testing in your npm package to avoid errors? #3 npm link or yarn link are options for you? #4 is an option for you using a local npm registry to avoid the publish process? #5 I use local paths instead npm links. This allows me to test my own npm modules in a nodejs application in seconds. – JRichardsz May 20 '21 at 15:51

2 Answers2

8

You want to use the npm link or yarn link commands.

In the case of Yarn, the v1 doc is more explicit about the use case.

Caerbannog
  • 790
  • 3
  • 8
0

Instead of using NPM publish, try doing npm install local folder npm install folder

You try using npm install local folder.

based on above answer you either do npm update or npm install

Parameshwar Rao
  • 47
  • 5