Publishing your jQuery plugin to npm, the quick and dirty way

If you missed it, the jQuery plugin registry now only provides read access to plugins and recommends plugin publishers switch to npm to publish their plugins.

If you’re here, I’m guessing you’re one of the plugin publishers making the switch. We want to make it as painless as possible.

You may have heard of some of the ways that npm makes frontend development easier with tools like Browserify and WebPack. We won’t be covering any of that goodness in this post. Instead, we’re just going to focus on helping you get your package up to the npm registry so your users can download it, and we’ll cover the improvements you can make in later posts.

Before we start

You’re going to need to:

Install Node.js
Update npm by running npm install -g npm

Logging in to npm on the command line

In order to publish to the npm registry, you need to have an npm user and you need to be logged in as that user on the command line.

First, check whether you are logged in by running:

npm whoami

If you are logged in, it will show your username. Otherwise, it will show Not authed. Run 'npm adduser'

The npm adduser command can be used to create a user, or to log in as an existing user. It will prompt you for your username, password, and email address.

$ npm adduser
Username:
Password:
Email: (this IS public)

The credentials will be stored in a file called .npmrc, so you should only need to login once.

Creating your package manifest

When you published to the jQuery plugin registry, you needed to provide information about your plugin using a *.jquery.json package manifest. In the same way, you’ll need to provide a package.json file for npm to read and learn about your package.

You can either move your existing manifest from *.jquery.json to package.json and update the values, or you can create a new package.json.

Moving `*.jquery.json` to `package.json`

There are some differences between *.jquery.json package manifests and package.json manifests.

make sure you add jquery-plugin and ecosystem:jquery as keywords. This helps users find your package on npm.
npm doesn’t use the docs key. Instead, you’ll want to point to your repo using the repository key.
npm doesn’t use the demo key.
npm doesn’t use the download key.
the bugs key can either be a string, as it is in *.jquery.json, or it can be an object with url and/or email.

Even though npm doesn’t use the docs, demo, and download keys, you can leave them in your package.json. While npm has rules for the keys that it uses, it doesn’t care if you add additional keys.

Creating a `package.json` from scratch

You can cd into the root of your project’s directory and use npm init to autogenerate a package.json file. It will prompt you with a series of questions.

Make sure to add the keywords jquery-plugin and ecosystem:jquery when it prompts you for keywords.

Publishing your package

Now that you have your package.json file in place, you can publish to the npm registry. npm uses semantic versioning just like the jQuery plugin registry does. You can watch our video if you need a refresher on how semantic versioning works. We also have a video on how to publish.

If, based on the semantic versioning rules, you need to create a new version of your package, either change the version number in your package.json file, or run npm version <type>. For example, to make a patch release, you would use npm version patch. This will increment your version in your package.json file and will also create a tag in your git repo.

After that, run npm publish to publish your package to the npm registry. If it worked, you should see a page for your package at npmjs.com/package/package_name.

If you need any help, you can tweet at us or email for support.

Coming up next…

In the next post, we’ll cover downloading jQuery plugins from npm and using them in your projects.

Translations

Japanese: https://medium.com/@watilde/%E7%BF%BB%E8%A8%B3-publishing-your-jquery-plugin-to-npm-the-quick-and-dirty-way-8487344e2b3f