DEV Community

abdfn
abdfn

Posted on • Updated on

Build trash program by JS and make it npm pkg & publish it

#javascript #npm #bash #node

Hi, in this post, we'll create trash program by JS,
after create it, this program will be npm package.

Pre-requisites

before we move on, you'll need :

Let's go

We're going to create package.json

The first command is npm init

$ npm init
Enter fullscreen mode Exit fullscreen mode

I'll name it manx

so you should have like this ...

{
  "name": "@your_npm_user_name/your_proj_name",
  "version": "1.0.0",
  "description": "Cli app can move files/folders to the trash without any dangerous",
  "main": "cli.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://Git_Repos_Site/Your_Git_Repo"
  },
  "keywords": [
    "cli-app",
    "cli",
    "trash"
  ],
  "author": "Your_Name",
  "license": "ISC"
}
Enter fullscreen mode Exit fullscreen mode

We don't want to have package-lock.json, so type

$ touch .npmrc
Enter fullscreen mode Exit fullscreen mode

in .npmrc

package-lock=false
Enter fullscreen mode Exit fullscreen mode

now we'll install @abdfnx/hac_k & trash

$ npm i @abdfnx/hac_k trash
Enter fullscreen mode Exit fullscreen mode

ok, let's create cli.js

in cli.js

#!/usr/bin/env node
"use strict";
Enter fullscreen mode Exit fullscreen mode

now we're going to require the packages

#!/usr/bin/env node
"use strict";

const hac_k = require("@abdfnx/hac_k");
const manx = require("trash");
Enter fullscreen mode Exit fullscreen mode

nice, also create two variables

// Ignore all flags of `rm` program.
const ignoredFlags = ["r", "f", "i", "d", "P", "R", "v", "W"];

const ignoredFlagsConfig = {};
Enter fullscreen mode Exit fullscreen mode

this variables're very important, so we'll make for loop

for (const flag of ignoredFlags) {
    ignoredFlagsConfig[flag] = {
        type: "boolean",
    };
}
Enter fullscreen mode Exit fullscreen mode

the most importnant variable is cli

const cli = hac_k(
    `
    Usage
      $ manx <file/folder> […]

    Examples
      # file
      $ manx xcode.tsx layout.tsx edge.tsx
      $ manx '*.tsx' '!xcode.tsx'
      # folder
      $ manx app
    `,
    {
        flags: {
            ...ignoredFlagsConfig,
        },
    }
);
Enter fullscreen mode Exit fullscreen mode

But what if the user entered a space, we need if statement

if (cli.input.length === 0) {
    console.error("Specify at least one path");
    process.exit(1);
}
Enter fullscreen mode Exit fullscreen mode

at the end add

manx(cli.input);
Enter fullscreen mode Exit fullscreen mode

the final result of file

#!/usr/bin/env node
"use strict";
const hac_k = require("@abdfnx/hac_k");
const manx = require("trash");

// Ignore all flags of `rm` program.
const ignoredFlags = ["r", "f", "i", "d", "P", "R", "v", "W"];

const ignoredFlagsConfig = {};

for (const flag of ignoredFlags) {
    ignoredFlagsConfig[flag] = {
        type: "boolean",
    };
}

const cli = hac_k(
    `
    Usage
      $ manx <file/folder> […]

    Examples
      # file
      $ manx xcode.tsx layout.tsx edge.tsx
      $ manx '*.tsx' '!xcode.tsx'
      # folder
      $ manx app
    `,
    {
        flags: {
            ...ignoredFlagsConfig,
        },
    }
);

if (cli.input.length === 0) {
    console.error("Specify at least one path");
    process.exit(1);
}

manx(cli.input);
Enter fullscreen mode Exit fullscreen mode

you're good, now let's test it, go to package.json and add bin, engines, files props

{
  "name": "@your_npm_user_name/your_proj_name",
  "version": "1.0.0",
  "description": "Cli app can move files/folders to the trash without any dangerous",
  "main": "cli.js",
  "bin": {
        "manx": "cli.js"
  },
  "engines": {
        "node": ">=10"
  },
  "files": [
        "cli.js"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://Git_Repos_Site/Your_Git_Repo"
  },
  "keywords": [
    "cli-app",
    "cli",
    "trash"
  ],
  "author": "Your_Name",
  "license": "ISC",
  "dependencies": {
    "@abdfnx/hac_k": "^1.0.2",
    "trash": "^7.0.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

type npm link

$ npm link
Enter fullscreen mode Exit fullscreen mode

add file and folder for test

$ touch test_file && mkdir test_folder
Enter fullscreen mode Exit fullscreen mode

Now the awaited moment, in the terminal

$ manx --help
    Usage
      $ manx <file/folder> […]

    Examples
      # file
      $ manx xcode.tsx layout.tsx edge.tsx
      $ manx '*.tsx' '!xcode.tsx'
      # folder
      $ manx app
$ manx test_file test_folder
Enter fullscreen mode Exit fullscreen mode

Congratulations, you now have a great program...

npm publish (optional)

if you want to publish your awesome project to npm, follow me

before publish, add some files

.editorconfig, .gitattributes, .gitignore and .travis.yml

it's optional, but it's better to create it

in .editorconfig

root = true

[*]
indent_style = tab
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.yml]
indent_style = space
indent_size = 2
Enter fullscreen mode Exit fullscreen mode

.gitattributes

* text=auto eol=lf
Enter fullscreen mode Exit fullscreen mode

.gitignore

node_modules
yarn.lock
Enter fullscreen mode Exit fullscreen mode

.travis.yml

language: node_js
node_js:
  - '14'
  - '12'
  - '10'
Enter fullscreen mode Exit fullscreen mode

ok, type

$ npm unlink
Enter fullscreen mode Exit fullscreen mode

and now we must login to npm

$ npm login
Enter fullscreen mode Exit fullscreen mode

publish

$ npm publish --access=public
Enter fullscreen mode Exit fullscreen mode

and if you want to install it, you should install it globally

$ npm i -g YOUR_PKG
Enter fullscreen mode Exit fullscreen mode

you can see your package in npm

visit https://www.npmjs.com/package/YOUR_PKG

Here you are, you have trash program and npm package...

enjoy, and see you next time.

Top comments (0)

Read next

crazycomplete profile image

crazy-complete: Generate shell auto-completion files with a single configuration file

Benjamin Abendroth -

jacksonsantin profile image

Login/cadastro com firebase + Vue JS #PASSO 1️⃣

Jackson Dhanyel Santin -

laustke profile image

I created a video tutorial on how to make a responsive sidebar using CSS and vanilla Javascript

Louis Austke -

madsstoumann profile image

Designing Better Tables: Using Popovers for Extra Data

Mads Stoumann -