Learn how to build an extension that adds JavaScript-related commands to Replit for managing npm packages and running scripts.
npm install <package name>
replkit add background
in the shell. This creates a new folder src/background
. The src/background/main.tsx
file here is where we’ll be writing our code.
npm uninstall ${package}
The simplest way to figure out what you have installed is by parsing package.json
, and looking at the dependencies object. Since this tutorial is focused on commands, here’s the code that reads package.json
and returns an array of installed packages:
uninstallCommand
as one of the commands returned by the root command:
search
and active
parameters?
active
is true
when users have selected the “Install” command (as opposed to the command system merely querying for subcommands in advance). We can check for it to make sure that we only query npm when we know that a user is interested in installing an extension.search
returns what the user has typed into the command bar, which we use for searching the npm registrynpm
in all the examples? JavaScript ecosystem has a plethora of package managers, including yarn, pnpm, and bun. How can we support all of them? And can we do it “magically” where someone using this extension doesn’t have to manually select their package manager in our command? (Hint: it involves the lockfiles)
package.json
before showing the command. And maybe, if someone doesn’t have a package.json
yet, we can instead show a command to npm init
their project!