node package manager
Painless code sharing. npm Orgs help your team discover, share, and reuse code. Create a free org »

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 - denglingbo@126.com