febd

fe build

整个程序是依赖于 webpack ， gulp 做模块管理之外的事

/data 以及 /src 两个文件夹与本项目无关，只是例子

如何安装

npm install febd --save-dev

如何使用

var Febd = require('febd');
var febd = new Febd(/*config*/); // config 在后面会讲到， 当然这个配置项是必须的

febd 提供的接口

// 启动 mock 服务
febd.mock(opts);

// 启动调试服务
// callback(makerWebpackConfig, webpack) makeWebpackConfig.get() 之前对 makeWebpack 进行其他操作
// 这个栗子 #A 会在后面讲到
febd.devSatart(callback);

// 启动模拟线上的前端打包环境
febd.build(gulpCallback, callback);

// 启动前端服务 - 这个仅用在 .build 情况下
febd.connect();

makerWebpackConfig 提供的接口 (有一些我就略过了)

• .set(webpackConfig) - 直接传入一个 webpackConfig.js - 如果你很熟悉 webpack 的配置项了，就直接用这个吧
• .setAlias(aliasObject) - 设置 alias
• .addLoaders(loaders) {Array|Object} - ([{loader}, {loader}]) | {loader}
• .clearLoaders()
• .addPlugins(plugins) {Array}
• ... 还有一些就看源码吧，注释都加上了

有两个必须的文件

• config.js - 至于名字你随意，这是一个很重要的文件，他作为整个程序的基础配置项
• gulpfile.js - 这个是作为启动本地服务、模拟线上环境、打包用的

上面2个文件你可以在 node_modules/febd 中拷贝样例

config.js

直接看 node_modules/febd 中的例子哇，主要是做了一些基础配置项

gulpfile.js

var path = require('path');
var srcDir = path.resolve(process.cwd(), 'src');

var setMaker = function (maker, webpack) {
    maker.setAlias({
        zepto: srcDir + '/static/js/common/zepto',
        ui: './ui/'
    });

    maker.addPlugins([
        new webpack.ProvidePlugin({
            $: 'zepto'
        })
    ]);
};

/** 
 * DEV
 */
gulp.task('dev-webpack', function (callback) {
    // 这里就是上面要说的栗子 #A 
    febd.devStart(function (maker, webpack) {
        setMaker(maker, webpack);
    });
});

/** 
 * Release
 */
gulp.task('release-webpack', function (gulpCallback) {

    febd.build(gulpCallback, function (maker, webpack) {
        setMaker(maker, webpack);
    });
});

上面是栗子

ME: deo - [e-mail]