DEV Community

Dr SU
Dr SU

Posted on • Originally published at blog.toheeb.com

3 Categories of NPM Packages

So I typed that in Google and no interesting result. By my experience, I feel I can categorize them into those used via:

  • CLI,
  • API,
  • as a Plugin

CLI

Examples: Del-cli, Postcss-cli, Webpack-cli, and any other npm package you see ending with "-cli" (convention, probably).
They are run via the terminal

> del '*.png' --dry-run
Enter fullscreen mode Exit fullscreen mode

A package can be available as a CLI only tool (del-cli), while some others may be available as an alternative to run the API via CLI (eg Webpack-CLI runs Webpack via CLI).

API

Examples are Webpack, Bootstrap. They are required/imported in a script

// Using webpack via API
const webpack = require('webpack');

webpack(...);
Enter fullscreen mode Exit fullscreen mode

or referenced

<!-- For example, in an html file -->
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

NB: The above is used to illustrate referencing a file directly from the node_modules. For those using bundlers like webpack, you may simply import bootstrap in a script like this and take advantage of other features of the bundler

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
Enter fullscreen mode Exit fullscreen mode

Plugin

By plugin, I mean a package that can be used to make another package compatible in an environment. Example: gulp-postcss makes postcss usable within gulp; css-loader and Mini Css Extract Plugin enable using a stylesheet through a script in webpack (I'm categorizing both webpack loaders and plugins as plugins in a general term). Their usage depends on the environment's condition.


Anything else I missed? Thanks for reading

Top comments (0)