Install Multiple Versions of the Same Package in NPM with Package Aliases
There are some really known patterns to migrate packages in large applications. You might find some code referencing to a different package (such as @my-namespace/my-package/next) or specific branches (like @my-namespace/my-package#next).
Anything that helps during package migrations or bumps having several majors of differences.
The good news is that you can have it done directly via NPM! What can be done in this case is an idea called "package alias". So you can have multiple versions of the same package running in your app and you can work on the upgrades mitigating possible issues.
Will Mendes: [0:00] Let's go on a GitHub repository called npm-package-aliases-playground. We copy the GitHub URL by click the link. Moving back to our terminal, we can run git clone, passing the link that we copied. Inside the folder, we can run npm install to add all the package dependencies for the project.
[0:22] Now, it's time to open the project with Visual Code. Let's open package.json. As you can see, we have the dependencies and a package called feature-toggle-service and the version 1.2.. In the index, we have the uses for the package.
[0:39] Let's check it out. We have the setConfiguration and isOn. Those are functions for the feature-toggle-service. After that, we have toggles which are the configuration for the feature toggle that we can pass setConfigurationObject. After that, we have Objects.keys which is doing a loop as it toggles, getting the keys and doing it forEach.
[1:01] Inside forEach, we have a console to check if it's on. If it's on, will show emoji saying that's OK. Otherwise, will show emoji saying that it's not. Let's check the code in action by running npm start.
[1:16] As you can see the console, we have a list of feature toggles and the keys checking if they are enabled or not. For example, if we change the value of one of the toggles and run the code again, you can see that the emojis are different, showing that it's not enabled.
[1:34] Now, if you run npm info feature-toggle-service, you can see that the latest version is 6.. when in package.json, we are using the version 1.2.. To help with the upgrade, we can create a alias for this package.
[1:52] We can do it by run npm install feature-toggle-service@npm:feature-toggle-service@1.2., which the version that we are using at the moment. As you can see in the package.json, we have now feature-toggle-service pointing to npm:feature-toggle-service and using the version 1.2.. If you run npm start, the code is running as expected.
[2:23] The next step now is add a new, the latest, version of the package by run npm install feature-toggle-service-next@npm:feature-toggle-service@6.., which the latest version for this package. If you see the dependency list, we have feature-toggle-service and feature-toggle-service-next, one pointing to the version 1.2. and the second one pointing to the version 6...
[2:52] Moving back to the app, we can use both packages. In the feature-toggle-service-next, we can export two functions, set and isOn that will be calling isOnNext to avoid issues. Now, we'll be passing toggles configuration into set. Inside it forEach of the toggles, we'll be adding a new console log.
[3:15] We'll be using isOn to check the previous package and isOnNext to check the latest version for this package. If we run npm start, we can see the results for both functions. That means that we can remove the old package without any issues.
[3:33] In this case, let's remove isOnNext. Run npm start. It should be running as expected. Let's remove the package feature-toggle-service-next by running npm uninstall, passing the package name. Also, let's do the same with feature-toggle-service by installing the package using the latest version.
[3:55] As you can see in the package, now we have feature-toggle-service pointing to the latest version. Now, we can remove the -next suffix. When we run npm start, we'll be using the latest version for this package.