Xiao Bai took on a new task and wanted to develop an NPM package. By loading this package into your project, you can directly upgrade the version of the component library and modify the associated dependencies with a single command. “That sounds simple, but the task remained for three days

Today I will introduce you how to develop an NPM package.

The development of

Basic configuration

Create a folder and run the NPM init command to configure the package.json file. Enter the project name and version to complete basic configuration.

package.json
package-lock.json
README.md

Write the code

As he had no previous experience developing NPM packages, He turned to eslint, the most commonly used NPM package. You see the first folder, bin.

We develop the NPM package and want to execute it directly by command, so we need to configure the executable module under this package. How do you do that? The package.json file of NPM can be used to specify which internal command file to execute through the bin property.

// package.json
"bin": {
    "upgrade": "./bin/index.js"
 }
Copy the code

It feels a little abstract. The bin directory stores directly executable JS files. This JS file is compiled, in line with ES5 syntax, and can be directly executed. We configure the command in package.json, so we can execute the js file directly in bin to implement the corresponding function by typing the command.

If your package implements more and more complex functions, it is not appropriate to put all files in the bin directory. At this point, you can split out folders for different functions, such as lib, config, etc., and then add them to the bin folder.

Command line arguments

Because what I have implemented is that I want to upgrade the component library version with a command, such as the upgrade 13.1.1 command. In this case, I need to obtain the input parameter 13.1.1.

The process.argv property in Node allows you to read arguments from the command line.

The process.argv property returns an array containing the command line arguments passed in when the Node.js process is started. The first element is process.execPath. The second element will be the path to the JavaScript file being executed. The remaining elements will be any other command line arguments.

Reading directly from the process.argv array is one way to do this, but with a large number of inputs, it is difficult to tell which element is the parameter we need. So there are tools available to better parse the parameters. Such as Minimist, Commander, etc.

test

After finishing the code, I need to test whether the function of your package is normal, but I do not want to publish the package now, so how to connect my project locally to test? NPM Link to help you solve this problem.

The NPM link command links your NPM package to the corresponding project, where you can execute your NPM package directly from the command.

  1. Development of the NPM package root directory to executenpm link.
  2. Execute at the root of the project that needs to use the packagenpm link <name>, name is the name of the folder where the NPM package you developed is located.
  3. Execute command tests for packages under a project, such asUpgrade 13.1.1.

Release NPM package

When you test and find that the NPM package you developed has no task problems, you can publish your package to the NPM website or to the private repository you need.

  1. First configure the published repository in package.json. If this parameter is not set, NPM will be published to the official website by default.
"publishConfig": {
        "registry": "" // Warehouse address
    },
Copy the code
  1. Register users on NPM website. Official website Registered address
  2. Add your account first under the package you develop. Enter the user name, password and registered email information as prompted.
// Execute commands in the root directory
> npm adduser
Copy the code
  1. If you’ve added your account before, you can just do itnpm loginCommand.
  2. After login, executenpm publishCommand, and your package is released successfully.

This is the process of developing an NPM package, although you still have a lot of work to do to implement the specific features. For example, my task requires git Clone component library project to read the corresponding package.json file. If there is a specific version also need to switch branches and so on. This involves a lot more stuff, such as requiring Node to execute system commands and get the project path through process.cwd(). In the next article, I’ll detail how I accomplished this task.