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

felt

v0.3.2

Published

Ondemand bundler for ES6 / CSS Next

Downloads

20

Readme

Felt

Build Status

On-demand bundler for ES6 / CSS Next.

See also its options, plugins and recipes.

Note: Felt runs on Node 6.x or above.

CLI usages

In short, install Felt globally:

$ npm install -g felt felt-recipe-minimal

Note: felt-recipe-minimal is a recipe for Felt. You may install other recipes, too.

And run Felt:

$ cd path/to/project/
$ felt

Then, open your site in browser: http://localhost:3000.

Note: type Ctrl + C to stop the server

Run Felt

Assume that you have a project like this:

  • project/
    • public/
      • index.html
      • main.js
      • style.css
    • cache/
    • package.json

Then run Felt:

$ cd path/to/project/
$ felt --recipe minimal --src public

There're some official recipes. Check them, too.

Use config files

Assume that you have a project like this:

  • project/
    • public/
      • index.html
      • main.js
      • style.css
    • cache/
    • package.json
    • felt.config.js

Or choose your own config file:

$ felt --config felt.config.js

The default name of config is felt.config.js, so it's also fine:

$ felt --config

The config file could be like this:

'use strict'
const
  rollup = require('felt-rollup'),
  buble = require('rollup-plugin-buble'),
  resolve = require('rollup-plugin-node-resolve'),
  commonjs = require('rollup-plugin-commonjs')

module.exports = {
  src: 'public',
  handlers: {
    '.js': rollup({
      plugins: [
        resolve({ jsnext: true,  main: true, browser: true }),
        commonjs(),
        buble()
      ],
      sourceMap: true
    })
  }
}

See more detail about options

Change port

The default port is 3000. If you want to change it, use --port option:

$ felt --port 3333

Note: you can set the port option in your config file, too.

Watch changes

$ felt --src public --watch

Export static files

This is handy to upload the contents to amazon S3 or GitHub Pages. Felt exports not only compiled files but also other assets like HTML, PNG, ...etc, too.

$ felt --src public --export dist

Note: with export option, Felt is not run as a server. It works as just a bundler.

With Express

Install Felt and use it as an express middleware.

$ npm install --save felt

Add server.js to the project:

const
  express = require('express'),
  felt = require('felt'),
  recipe = require('felt-recipe-minimal')

const app = express()

app.use(felt(recipe, { src: 'public' }))
app.use(express.static('public'))
app.listen(3000)

Separated config files

It's a good idea to separate the config from server.js:

const
  express = require('express'),
  felt = require('felt')
  config = require('./felt.config.js')

app.use(felt(config))
app.use(express.static('public'))
app.listen(3000)

felt.config.js could be like this:

const
  rollup = require('felt-rollup'),
  buble = require('rollup-plugin-buble'),
  resolve = require('rollup-plugin-node-resolve'),
  commonjs = require('rollup-plugin-commonjs')

module.exports = {/* options */}

Options

property | default | descriptions :-- | :-- | :-- opts.src | . | the document directory to serve opts.cache | 'cache' | if it's located inside src, ignored on requests opts.root | process.cwd() | usually no need to set it opts.handlers | {} | see the section below opts.patterns | [] | see the section below opts.excludes | [] | see the section below opts.external | {} | see the section below opts.update | 'once' | 'never' or 'always' opts.refresh | true | set false to skip refreshing on starting opts.watch | false | set true to detect changes opts.debug | false | set true to show debug comments on the terminal

opts.handlers

Default handlers for each extension.

{
  handlers: {
    '*.js': rollup({
      plugins: [
        resolve({ jsnext: true }),
        commonjs(),
        buble()
      ],
      sourceMap: true
    })
  }
}

opts.patterns

This option limits the target which Felt works with. This is handy when you want to use Felt for only a few files like this:

{
  patterns: ['index.js', 'components/*.js']
}

Which handler will be used is depends on the extension. If no handler for the extension, Felt will throw exceptions.

You can also specify the custom handler for the pattern:

{
  patterns: [
    'index.js',
    {
      pattern: 'components/*.js',
      handler: rollup({
        plugins: [babel()],
        sourceMap: true
      })
    }
  ]
}

opts.excludes

This option excludes the files from compiling and copying (when exporting). Cache directory and 'node_modules/**' are always excluded. For example:

{
  excludes: ['no-compile/**']
}

opts.external

This option makes copies from deeper files typically in node_modules. For example, if you need to access node_modules/pouchdb/dist/pouchdb.min.js, you may write like this:

{
  external: {
    'pouchdb.js': 'node_modules/pouchdb/dist/pouchdb.min.js'
    // 'where/to/expose': 'path/from/opts.root'
  }
}

Then you can access it by http://localhost:3000/pouchdb.js. This option is convenient to directly expose a JavaScript or CSS file which comes from npm or bower.

Note: The files will not be processed by opts.handlers. This means that the file will skip compiling by rollup and so on.

Plugins

Plugins are the interface to compilers like Rollup or PostCSS. Actually, these are the thin wrapper of these libraries:

Recipes

Recipes are pre-made configurations. You can use these recipes with some overwrite with ease.

Note: the repository name of the recipe supposed to have prefix felt-recipe-.

License

MIT © Tsutomu Kawamura