vfe
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 = var builder = gulp
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.
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(
"./$name.tpl"
)Load html template file as a string module.
Custom modules directory
If you don't want use "/c" as component modules directory, overwrite it:
Command line
Install cli
npm install vfe -g
Init project using vfe-template
vfe init
Note: Using proxy option,
vfe init -p $proxy
. Such asvfe init -p tx
. See $tx
Run default build task
vfe
Start develop watcher
vfe start
Note: Start command support run with another task name, such as
vfe start sometask
, only if task name isstart-sometask
.
Releasing for production
vfe release
Note: Release command support run with another task name, such as
vfe release sometask
, only if task name isrelease-sometask
.
Configure
Vfe 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.
License
MIT.