31

npm-gui

 5 years ago
source link: https://www.tuicool.com/articles/hit/2mIviav
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

npm-gui

IjuaYbI.png!web

About

npm-gui is a tool for managing javascript project dependencies, which are listed in package.json or bower.json - in a friendly way. Under the hood it will use transparently npm , bower or yarn commands to install, remove or update dependencies ( to use yarn it requires yarn.lock file to be present in project folder. )

npm-guikey features:

  • global dependencies management
  • project dependencies management
  • project scripts runner
  • npm, yarn, bower support

Getting Started

Simplest way to run npm-gui is by using npx :

~/$ npx npm-gui

It will run the newest version of npm-gui without installing it on your system.

Installation

npm-gui could also be installed as global dependency:

npm install -g npm-gui

or locally:

npm install npm-gui

How to use

npm-gui app will be accessible in browser under address http://localhost:1337/ . Remember to first use a command below:

When installed as global dependency you could run npm-gui with command line:

~/$ npm-gui

Then you could navigate to folder containing your javascript project (including package.json or bower.json ). ZvQnYjA.gif

Or you could run npm-gui command in you desired folder:

~/workspace/project1$ npm-gui

If you need to start app on another host/port , you could add host:port argument to command for example:

~/$ npm-gui localhost:9000

Starting

Navigating between projects

To change project press folder icon in top-right corner. Navigation panel will allow you to change folder - it must contain yarn.lock, package.json or bower.json file to be choosen.

ZvQnYjA.gif

Installing new dependencies

To install new dependency you can use search/add button . After typing name of the dependency in input - press search button - results will appear on list below. You can switch here between npm/bower repository. You must also decide will dependency be installed as production or development. After successfull installation of new dependency it will appear on project list.

2mQjqev.gif

Removing dependencies

To remove depenedency from your project simply press trash icon on the right.

myUnIzQ.gif

Updating selected dependencies

  • TODO

Updating all dependencies as...

To do a batch dependencies update and save new versions to package.json, for example wanted , press one of the green button above list of project dependencies.

ry6jErm.gif

Running scripts

  • TODO

Removing scripts

  • TODO

Enlarging console log

To get more readable log you can use enlarge button which will change width of console.

Consoles are not self-closing they will be visible until you close them with remove button

aMrq2e7.gif

Authors and Contributors

@q-nick


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK