npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

frontend-dependencies

v2.0.0

Published

Copies node packages to a directory where your frontend tools will be able to find them

Downloads

3,756

Readme

Build Status

frontend-dependencies

Easily manage your frontend dependencies in package.json: Install node modules and copy desired files to each directory. You can use all frontendDependencies also in the backend (isomorph JavaScript).

NOTE: There is a breaking change from Version 0.4.0 to 1.0.0. Be sure to update your projects to the new syntax!

Example

Your package.json:

{
  "name": "frontend-dependencies-test",
  "version": "1.0.0",
   // etc.

  "devDependencies": {
    "shelljs": "0.7.4"
  },
  "frontendDependencies": {
    "target": "static/",
    "packages": {
      "jquery": {
          "version": "3.1.0",
          "src": "dist/jquery.min.js"
      },
      "normalize.css": {
          "version": "4.2.0",
          "src": "normalize.css"
      }
    }
  }
}

Your target folder in your project will look like:

 project
   |
   |_ static
   |    |_ jquery.min.js
   |    |_ normalize.css
   |

Full example

{
  "name": "frontend-dependencies-test",
  "version": "1.0.0",
  "description": "frontend-dependencies test project",
  "main": "index.js",
  "author": "Matias Surdi <[email protected]>",
  "license": "Apache-2.0",
  "devDependencies": {
    "shelljs": "0.7.4"
  },
  "frontendDependencies": {
    "target": "static/",
    "packages": {

      "normalize.css": "4.2.0", // copy whole package

      "jquery": {               // with options
          "version": "3.1.0",   // for `npm install`: version, tag or version range
          "src": "dist/*"       // relative path in package to copy files
          "namespaced": true    // extra parent folder with package Name
      },

      "turbolinks": {
          // alternative to 'version`: specifie git url, tarball url, tarball file, folder
          "url": "git://github.com/turbolinks/turbolinks.git",     
          "src": "{src,LICENSE}", // copy multiple files
          "target": "static/turbo" // specific target path
      }
    }
  }
}

Your target folder in your project will look like:

 project
   |
   |_ static
   |   |
   |   |_ jquery
   |   |    |_ core.js
   |   |    |_ jquery.js
   |   |    |_ jquery.min.js
   |   |    |_ ...
   |   |
   |   |_ normalize.css
   |   |    |_ CHANGELOG.md
   |   |    |_ LICENSE.md
   |   |    |_ normalize.css
   |   |    |_ ...
   |   |
   |   |_ turbo
   |        |_ src
   |        |   |_ turbolinks
   |        |
   |        |_ LICENSE
   |
   |

Installation

npm install --save frontend-dependencies

Make it a postinstall script by adding this to your package.json:

    "scripts": {
        "postinstall": "node ./node_modules/frontend-dependencies/index.js"
    }

If postinstall did not run you can use this after installed:

npm run postinstall

Run can also run it with

./node_modules/.bin/frontend-dependencies

Windows user run it in PowerShell or use this command in Command Prompt:

node_modules\.bin\frontend-dependencies.cmd

Packages Options

version

The npm package name is taken from the specified name in "frontendDependencies.packages".

                         // none: install latest
    "version": "0.2.4"   // version
    "version": "beta"    // tag
    "version": "^0.2.4"  // version range

url

Alternative sources for your packages.

    "url": "ssh://[email protected]:port/path/to/repo.git/"
    "url": "git://github.com/ember-cli/ember-cli.git#v0.1.0"
    "url": "forever.tar.gz"
    "url": "https://github.com/User/repo/archive/master.tar.gz"
    "url": "/testfolder"

src

The source file(s) or folder(s) within each npm package to be copied.

   // option 1: do not specify to copy the whole folder

   // option 2: copy one file or folder
   "src": "dist/*"

   // option 3: copy serveral files or folders
   "src": "{index.js,index.css}"

target

  • specific target folder to copy the files of a frontend package to
  • if not specified, target is the global "frontendDependencies.target"
   "target": "dest"

namespaced copy

Often you will copy just a single file from a package and copy it in your static files folder. Doing this for 4 files, you won't experience namespace errors. If you copy more files or the whole folder (= no src option defined), then you want to create a parent folder with the actual module name. Enable this with the namespaced option; the default is false.

   "namespaced": true

If neither src nor namespaced options are specified as in the example below, namespaced defaults to true, to avoid namespace errors (e.g. file conflicts from two package.json).

// no `src` and `namespaced` defined
"jquery": {
   "version": "3.1.0"
},
"normalize.css": {
   "version": "4.2.0"
}
// => conflicts prevented, by parent folders with module name

Tests

npm test

ToDo

  • build a CI
  • improve testing

Experience with managing npm dependencies for the frontend

  • bower: possible, but a source of trouble
  • npm + grunt/gulp: possible, but you have two files to manage
  • pancake
    • https://github.com/govau/pancake
    • https://medium.com/dailyjs/npm-and-the-front-end-950c79fc22ce
    • might be good to manage complexe dependencies in very large projects
    • when you try not keep the ammount of dependencies at a reasonable level, this might be overkill

Ideas

The goal of this package is to make the management of frontend components easier and lower maintenance. Aspects we consider important for "how to do it right":

  • Most packages come with a ready to use (compiled and minified, etc.) version of js and css
  • With http2, the sending of small files is encouraged
  • The browser can cache common libs easy

We think to copy the needed part of a libs to your webserver folder, is simple and gives you most benefit.

Although there is no handling of the dependencies of the frontend components (like a jQuery plugin needs jQuery), this seems not too important for small projects and also frontend packages can do this over peerDependencies.

This article is interesting: http://blog.npmjs.org/post/101775448305/npm-and-front-end-packaging