node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »

vfe

vfe

npm version

vfe is a components builder with specified directory structure, base on webpack and gulp.

Usage

See example.

Installing:

npm install vfe --save

Using with gulp build tool, create a gulpfile.js file

var gulp = require('gulp')
var vfe = require('vfe')
 
gulp.task('default', function () {
    
    return vfe({
            entry: './index.js',
            libs: './lib/*.js'
        })
        .pipe(gulp.dest(dist))
})

Project folders specification:

./
 |___/c
 |   |
 |   |___/header
 |       |
 |       |____header.css
 |       |
 |       |____header.js
 |       |
 |       |____header.tpl
 |       |
 |       |___/images
 |           |____icon.png
 |   
 |   
 |____gulpfile.js
 |
 |____index.js
 |
 |___/lib
     |____*.js
  • c/

    Component modules directory, default is "/c". Using require("$componentName") to load module, such as load header module: require("header") will auto load header.css and header.js.

    Note: It can be replaced of custom_directory using modulesDirectories option. See

  • lib/

    Non-modularized js will concat with components' bundle file.

  • index.js

    Components entry js.

Command line

Install vfe command line tool:

npm install vfe-cli -g

Init project using vfe-template

vfe init [template]

Note: Using proxy option, vfe init -p $proxy. Such as vfe init -p tx. See $tx

vfe init support 3 types template:

  • default An simple boilerplate that using vfe as component builder only.
  • client The boilerplate is appropriate for client-side render project. It use Zect as components framework.
  • node The boilerplate is appropriate for server-side render project. It use Real and comps.
  • spa The boilerplate is appropriate for that project which using client-side render and hash router without reloading. Components framework use Zect and router use Routed.
  • autonode Autonode template.

Run default build task

vfe

Start develop watcher

vfe start
## aliase
vfe s

Note: Start command support run with another task name, such as vfe start sometask, only if task name is start-sometask.

Releasing for production

vfe release
## aliase
vfe r

Note: Release command support run with another task name, such as vfe release sometask, only if task name is release-sometask.

Require rules

  • require("/$components_modules/name/$resource.js")

    Component resources absolute path.

  • require("$name")

    Short name of "/$components_modules/name/$name.js".

  • require("$dir/$name")

    Short name of "/$components_modules/dir/$name/$name.js".

  • require("$modules_dir/$name")

    Short name of "/$components_modules/$name/$name.js".

  • require("./$name.tpl")

    Load html template file as a string module.

  • require("#$name")

    Request "$name" module directly without any tansform. Such as:

      * require('#$dir/name') // equal require('$dir/name') directly
    
  • require("~/$path")

    Load module by "$path" base in process.cwd() and without any tansform. Such:

      * require('~/$dir/name') // equal to require('$cwd/$dir/name')
    

Custom modules directory

vfe({
    entry: './index.js',
    libs: './lib/*.js',
    modulesDirectories: ['c', 'custom_modules']
})

If you don't want use "/c" as component modules directory, overwrite it:

vfe({
    modulesDirectories: ['components'] // use "/components" as modules directory 
})

API

  • vfe(options)

    options also is webpack's options. vfe only options:

    options

    • name output filename without extension.

    • hash enable/disable using output, default true

    • minify enable/disable compress css/js, default true

    • rule enable/disable require rule transform, default true

    • vfeLoaders configuration for build in plugins, include:

    • components.directories those modules in directories will be loaded as components(using component require rule if matched), and directories will be append to resolver.modulesDirectories, default [c]

    • components.extensions Load components by matching extension, default [js,jsx,coffee]

    • vfePlugins

    • vfeLoaders configuration for build in loaders, include:

      • tpl default enable, set false to disable
      • css default enable, set false to disable
      • less default disable, pass true/object to enable
      • image default enable, set false to disable

    For example:

        vfe({
            // ... 
         vfeLoaders: {
         tpl: false, // disable html-loader for *.tpl 
         css: {
                    options: {
                        publicPath: '../'
                    }
                },
                less: {
                    test: /\.(ls|less)$/,
                    options: {
                        publicPath: '../'
                    }
                },
                image: {
                    loader: 'file-loader?name=images/[name]_[hash:6].[ext]'
                }
         }
         // ... 
        })
  • vfe.bundle(src[, options])

    options

    • name output filename without extension
    • hash enable/disable using output, default true
    • minify enable/disable compress css/js, default true
    • concats those files will be concat directly without minify
  • vfe.HASH_LENGTH

    Vfe default output name's hash-length

  • vfe.util

    • once( handler(next) ) run in once the the same time, run next after done, no queue

Expose modules

Using gulp module of vfe without require, such as:

vfe(options)
    .pipe(vfe.if())
    .pipe(vfe.rename)
Module name
if gulp-if
hash gulp-hash
filter gulp-filter
merge merge2
rename gulp-rename
clean gulp-rimraf
concat gulp-concat
uglify gulp-uglify
multipipe multipipe
webpack webpack
ExtractTextPlugin extract-text-webpack-plugin

Configure

  • Override vfe's loader config
{
    vfeLoaders: {
        tpl: {},   // html-loader, default match: *.tpl 
        css: {},   // css-loader,  default match: *.css 
        image: {}, // file-loader, default match: png|jpg|gif|jpeg|webp 
    }
}
  • WebPack Using as vfe(options) , options will be passed through to webpack function.

Change logs

Version 2.1.2 - 2016/10/9

  • Using "#$name" instead of "!$name" for resolving module directly, to void rule conflict with webpack.
  • Add vfeLoaders.font option.

Version 2.0.0 - 2016/4/13

  • Remove options: "node_modules", "onRequest".
  • Added options: "componentsDirectories" those directories will auto append to resolve.modulesDirectories.
  • Using componentResolver instead normalModuleReplacement for component rules

License

MIT.