Git Product home page Git Product logo

parcel-map's Introduction

parcel-map

gather asset information from file globs in package.json

You can use this module to build a static asset pipeline to work alongside browserify's dependency graph.

NOTE: These docs are badly out of date, but the module is working. See parcelify for an example of how to use the module.

build status

example

var browserify = require('browserify');
var parcelMap = require('parcel-map');

var b = browserify(__dirname + '/views/page1');
var opts = {
    keys: [ 'style' ],
    defaults: { style: 'images/*.jpg' }
};
parcelMap(b, opts, function (err, graph) {
    console.log(graph);
});
b.bundle();

For a views/page1 directory with a package.json of:

{
  "style": "*.css"
}

and these files:

page1/index.js
page1/upper.js
page1/beep.css
page1/iamges/beep.jpg

The index.js requires two files, the 'upper.js' in the local directory and 'widget', a module with a package.json of:

{
  "style": "*.css"
}

the resulting parcel-map output is:

{ packages: 
   { '2a0f0daf500f9de39847f70e6ded76b27543fdc3': 
      { style: '*.css',
        __dirname: '/home/substack/projects/parcel-map/example/views/page1' },
     '80f1bf36696fb5ff6602576674c3a2774252a623': 
      { style: '*.css',
        __dirname: '/home/substack/projects/parcel-map/example/node_modules/widget' } },
  assets: 
   { '/home/substack/projects/parcel-map/example/views/page1/beep.css': '2a0f0daf500f9de39847f70e6ded76b27543fdc3',
     '/home/substack/projects/parcel-map/example/views/page1/images/beep.jpg': '2a0f0daf500f9de39847f70e6ded76b27543fdc3',
     '/home/substack/projects/parcel-map/example/node_modules/widget/style.css': '80f1bf36696fb5ff6602576674c3a2774252a623' },
  dependencies: 
   { '2a0f0daf500f9de39847f70e6ded76b27543fdc3': [ '80f1bf36696fb5ff6602576674c3a2774252a623' ],
     '80f1bf36696fb5ff6602576674c3a2774252a623': [] } }

Note how parcel-map found the local css in page1/beep.css and the image page1/beep.jpg from the default "images/*.jpg" glob.

It also found the widget/style.css from the widget module, because widget was included from index.js, so the lookup rules were triggered and the package.json in widget/ was processed through the parcel-map rules.

You can generate this parcel map output with the API directly or you can use parcel-map as a browserify-plugin:

$ browserify -p [ parcel-map -k style -o map.json ] views/page1 > static/bundle.js

methods

var parcelMap = require('parcel-map');

parcelMap(bundle, opts, cb)

Pass in a browserify bundle and some opts in order to generate the parcel map and get the result in cb(err, parcelMap).

parcelMap is an object with these keys:

  • "packages" maps package IDs to package.json contents.
  • "assets" maps asset file paths captured from glob expansion to the containing package's ID.
  • "dependencies" maps package IDs to an array of dependency package IDs.

The opts options are:

  • opts.defaults - an object mapping dotted keypaths into the package.json with default values to use when there is no field present in the package.json at the location indicated
  • opts.keys - an array of keys, dotted keypath strings, or array keypaths that traverse into the package.json to values that are glob strings.

install

With npm do:

npm install parcel-map

license

MIT

parcel-map's People

Contributors

dgbeck avatar go-oleg avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.