node package manager

kantan

Kantan

A relatively small Webpack based development server and build tool with hot-reload and available tree-shaking via Rollup.

This is designed as a quick and easy way to quickly spin up a server and enables you to simultaneously compile ES6 modules without a lot of the extra setup that would normally be a part of this workflow.It even supports CSS hot reloading as well.

This can also serve as a final build packaging tool using Rollup primarily but can also build with Webpack directly if you absolutely need to still use CommonJS modules. Rollup works with CommonJS too but tends to be less reliable during packaging.

Req

  • at least node v6.9.1
  • npm version 3.10.8 or greater

Install

Two ways

Method one

  • clone into node_modules
  • cd node_modules/kantan then npm install
  • node node_modules/kantan/bin/cli.js (or make up your own build script)

Method two

  • npm install -g kantan
  • run like any other command line script.

Use

Kantan is primarily intended for use as a development server, but can also be used to build packages.

Each form has some available options

Mode independent flags

  • --mode specifies the mode to run Kantan in. By default it's run as a dev server.

Development server Options

  • --port Specifies the port to run the development server on.
  • --entry Specifies the path to the main entry file for your app/site
  • --public Specifies the directory that contains your html.
  • --config Specifies the path to your own webpack.config.js file. Will use a default file if one is not specified.

Note that tree-shaking qualities of Rollup are only done when building the final package.

Rollup Build options

Since rollup is the primary build mechanism, the flags are really only meant when using Rollup for final bundling.

  • --moduleName Really only necessary if you want to build a UMD compatible package, you'll need a module name. The default one is "kantan"
  • --packageFormat Specifies the type of package you want to build when using Rollup. If Webpack is desired, settings should be adjustable via a config file
  • --outputFilename the filename you want to use for your bundle. If not specified, will take the filename of your entry javascript file.
  • --preserveCommonjs Rollup is intended for ES6 modules only. There is a plugin that enables the automatic porting of CommonJs modules, but whether or not it works is totally dependent on how the module was created. Set this to true if you absolutely need a CommonJS module and can't port it to an ES6 module or for whatever other reason you might have. If set to true, will use Webpack to bundle instead. Note that Webpack currently does not support tree-shaking.

CSS parsing

This dev setup is primarily meant to JS based projects, but CSS parsing is included as well. This is utilizing PostCSS as a pre-processing step as it has a large variety of plugins to change your css however you'd like. By default, it'll compile scss syntax using precss. From previous testing, there isn't a difference that I can find yet, but keep in mind that this isn't using the normal Sass rubygem.

Due to changes in Webpack 2 where the configuration object is very strict in what goes into it, the CSS parsing has been moved into it's own separate library. However, the configuration is more or less the same, though this time, you'll need to keep a css.js file in your root directory.

Note that on Windows, the watcherOptions key is required as Chokidar seems to have issues properly watching reloading.

    // the values are default values 
    module.exports = {
        // source directory 
        srcDir:`${__dirname}/css`,
        
        // destination directory 
        destDir:`${__dirname}/public/css`,
        
        // main css file 
        entry:`main.css`,
        
        // filename you want written for the final bundle 
        dest:`main.css`,
        
        // Chokidar options - this is necessary on Windows(possibly Linux but I've used Chokidar without these on OSX in the past) 
        watcherOptions:{
            persistent: true,
            usePolling:true,
            interval:100
        },
        
        // any additional PostCSS plugins 
        plugins:[]
    },

As long as you're using the default config, you should get hot reloading for css as well provided that the module.hot.accept() command on the main entry javascript file. If you use a custom Webpack config, you can add the setup as a loader like so

  {
       test:/\.js$/,
       exclude:/(node_modules|bower_components)/,
       loader:`kantan/lib/devsetup.js`,
       query:{
           css:"../css/main.css" // or whatever your path is to your css file 
       }
  },

The loader provides a few global variables as well that can be used to help isolate development from production code. The loader uses Webpack's style-loader to automatically append your css file to the page.

    window.ENV = "dev";
    window.IS_DEV = true;

Notes

  • Hot-reloading is opt-in, meaning you have to manually specify which files should get hot reloaded on save. To do that, all you have to do is add module.hot.accept() to the end of your file.
  • the css, public and src directories contain test files, edit to your hearts content.