How to Configure and Publish an NPM Package

[00:00 - 00:07] The next step is getting our code on the node package manager. We've been using the yarn command, but behind the scenes, Yarn uses npm as its package registry.

[00:08 - 00:14] Package registry is essential storage for code. By default, npm uses its public registry to store code.

[00:15 - 00:32] For example, when we're in Yarn Add React in module 1, Yarn first reached out to the npm's public registry, asking if it knows about the package called React. If React is in the registry, npm grabs the most up-to-date tarball, uncompresses it in our node modules directory, and links any required dependencies.

[00:33 - 00:43] If you don't already have an account, head over to the npm website and create a new account. Having an npm account will help associate packages to you and allow us to get metrics on our packages.

[00:44 - 00:52] To associate our library or package with the account we created at npm, we need to log into npm on our computer using a terminal. In your terminal, run Yarn Login.

[00:53 - 01:03] You'll be prompted to enter an npm username and email associated with the account you created. Yarn uses the command Yarn Publish to publish a package to the npm package registry.

[01:04 - 01:13] Yarn Publish will push all files in the registry except in two cases. First, if a .getignore file exists, the published command will not include any ignored files.

[01:14 - 01:26] Second, we can create a .mpmignore file to exclude files from the package registry. Having a .mpmignore file is useful for cases when we want to include files in source control but not in the final published code.

[01:27 - 01:35] Scroller contains files that users won't need, so we'll be adding a .mpmignore file. At the root of the project, create a .mpmignore file and add the following lines.

[01:36 - 01:50] .storybook and esbuild.js. When Scroller publishes to npm, both the .storybook directory and esbuild.js file are ignored. Both are only required during development, so consumers of Scroller will never need these files, so we are safe to ignore them when we publish our package.

[01:51 - 01:57] There is one more update we need to perform on our package.json file to make Sc roller publishable. Currently, this is the state of Scroller in the package.json file.

[01:58 - 02:05] As it stands, our package does not have an entry point. When consuming a package, npm needs to know what file to use as its starting point, our main file.

[02:06 - 02:10] There are many ways of doing this based on the module type. By default, npm looks for our main property in the package.json file.

[02:11 - 02:17] We can also define a module property for tooling that supports ECMAScript modules. Let's update our package.json to expose our bundle code.

[02:18 - 02:27] Now, when someone installs Scroller, it imports it using const.scroller = require.scroller. Their build system will know to look at the main property in the package.json and start at build/index.js in Scroller.

[02:28 - 02:39] If they use ECMAScript modules and use import.scroller from Scroller, their build system will know to look at the modules property and import build/ index.mjs. Yarn provides two ways of testing if her library is set up correctly.

[02:40 - 02:43] We'll explore both. First, we'll look at testing publishing using YarnPack.

[02:44 - 02:51] We can run a command called YarnPack, which will package our project into a tar file that contains all files that are included when we run YarnPack. Let's run YarnPack and see what's inside.

[02:52 - 02:57] Extract the tar file using your favorite app, like 7-Zip or the command line. A directory named package is created.

[02:58 - 03:06] When we navigate into the package directory, we can see that the files of the Y arnPack compiled into the tar file. As mentioned, these are the files that the user will get when they run Yarn InstallScroller.

[03:07 - 03:16] We can see from our test that package.json, source, and disk files are included . Yarn can symbolically link SimLink local packages together.

[03:17 - 03:22] In other words, SimLink's reference other directories are files in your system without copying them. This is done by running the YarnLink command.

[03:23 - 03:31] Doing a link will allow us to test Scroller as it feels added to another project as a dependency. To link Scroller, we're on YarnLink from inside the Scroller package.

[03:32 - 03:41] We're going to create a new project outside the Scroller project that we can use as a testing environment. In this case, get out of the Scroller directory and on the desktop, run Make Directory test environment.

[03:42 - 03:51] Go into that test environment and run YarnAnit-Y. Running YarnAnit-Y tells Yarn to initialize a project by automatically filling in all the default values for Yes.

[03:52 - 04:01] Finally, we can link Scroller by running YarnLinkScroller from within the test environment directory. Opening the test environment node module directory, we can see that Scroller is being included.

[04:02 - 04:22] [silence] To test that the link is working correctly, create a new JavaScript file, index .js, inside the test environment, and import Scroller. If you're using Visual Studio Code, auto-complete will let you know that Sc roller is set up correctly.

[04:23 - 04:33] Type import, squilly-based, squilly-brace, from quote, "SRC" to start typing in Scroller, and then push control space. Visual Studio Code will suggest Scroller as a correct dependency.

[04:34 - 04:41] From here, you know your package is exposed to users correctly. If you want to continue testing, turn test ENV into a full React environment and play around with it.

[04:42 - 04:52] From this point, we know our code is working properly, we're able to import it, so let's move on to finally publishing Scroller. To publish Scroller requires us to first log into npm, build the project, and then run the YarnPublish command.

[04:53 - 05:00] We've already done the first two steps, but to double-check, run YarnLogin, and then run YarnBuild. Finally, to publish Scroller, run YarnPublish.

[05:01 - 05:10] You'll be prompted to enter a version. Pressing Enter will accept whatever version the package that JSON file has, which in our case is 1.0.0, which is exactly what we want for our first release .

[05:11 - 05:15] Navigate to npmjs.com and go to your projects section. Scroller has been deployed.

[05:16 - 05:20] Lastly, we'll want to let developers know how to install our library. The best place for this is our readme.md file.

[05:21 - 05:32] Open readme.md and add a new section when developers know how they can install your package. In my case, to install Scroller, I'll add a section for installation where I tell developers to run YarnAdd, Ganders-Scroller.

[05:33 - 05:34] roller.