gulp-fecmd
what’s gulp-fecmd
gulp-fecmd is a tool that will help FE coding js with CMD(Common Module Definition) free without quote any third-party library in your program;
install
npm install gulp-fecmd
version 1.0.6
add support bower module, and more please look down “gulpfile.js” and “a.js”
version 1.0.7
support .json
version 1.0.8
support .es6 more infomation https://babeljs.io/docs/learn-es2015/
Documentation
//gulpfile.js
var fecmd = require('gulp-fecmd');
gulp.task('scripts', function() {
    var data =  gulp.src('js/a.js')
                    .pipe(sourcemaps.init());
    // you should use it before minify or uglify and ...
    // support bower module like 
    // fecmd({
    //      modulePath: "bower directory"
    // })
    // if you don't give modulePath, default is the directory in ".bowerrc" file 
    // or the folder bower_components in you build path but all the first is you 
    // scripts folder then bower module
    data = data.pipe(fecmd()); 
    
    config.minify && (data = data.pipe(uglify()).pipe(sourcemaps.write()));
    config.livereload && data.pipe(livereload());
    config.version ?
        data.pipe(rev())
            .pipe(gulp.dest(config.scripts.exp))
            .pipe(rev.manifest('js-map.json'))
            .pipe(gulp.dest(config.tmp)) : 
        data.pipe(gulp.dest(config.scripts.exp));
});
program file
<!-- file index.html -->
<script src="js/a.js"></script>
// file a.js
var b = require('lib/b.js'); // '[./]lib/b[.js]'
var tpl = require('tpl/xx.tpl'); //return a string
var json = require('data/data.json'); //return the Object
var es6 = require('lib/file.es6'); // return es5 code
// or
// require('c.js');
// require('d');
// 
// if your version is 1.0.6 or newer you can quote module 
// from bower module lick this require('jquery'), without 
// extname and without a filename jquery or jquery.js file
// in the same dir with a.js
require('jquery');
/* do something */
var console.log(b.c);
// file lib/b.js
// other code do something
// such
// require()...
// var a,b,c...
// function(){} ...
//export your module
//*
module.exports = {
    c: 2,
    cc: 23
}
/*/
//or
exports.c = 2;
exports.cc = 23;
//*/
//
es6
// file.es6
class Calc {
    constructor() {
        console.log('Calc constructor');
    }
    add(a, b) {
        return a + b;
    }
}
module.exports = Calc;
// usage
// var c = new Calc();
// console.log(c.add(1, 2));
template
require support template (*.tpl) like this file “xx.tpl” and export a string
<div>
    
    <span></span>
    
</div>
export
"<div>\n    \n    <span></span>\n    \n</div>"
###实现原理
其实很简单, 我们来看一下导出文件的代码
;(function(___CONTEXT___){
    if (!___CONTEXT___.___MODULES___) {
        ___CONTEXT___.___MODULES___ = {};
    };
    function convertToID(path){
        return path.replace(/[^a-zA-Z0-9]/g, "");
    }
    function require(path){
        var module = ___CONTEXT___.___MODULES___[convertToID(path)];
        if(!module){ console.log("导出文件有问题"); return;}
        if(module.fn && !module.exports){
            module.exports = {};
            module.fn(require, module.exports, module, window);
            delete module.fn;
        }
        return module.exports;
    }
    // file "/src/scripts/lib/cookieStorage.js" to module[srcscriptslibcookieStoragejs]
    ___CONTEXT___.___MODULES___["srcscriptslibcookieStoragejs"] = {
        path: "/src/scripts/lib/cookieStorage.js",
        fn: function(require, exports, module, window, undefined) {
            // 对应path的文件实际内容
            // ...
            module.exports = cookieStorage;
        }
    }
    // ... 其他模块
    
    // file "/src/scripts/lib/localStorage.js" to module[srcscriptsliblocalStoragejs]
    ___CONTEXT___.___MODULES___["srcscriptsliblocalStoragejs"] = {
        path: "/src/scripts/lib/localStorage.js",
        fn: function(require, exports, module, window, undefined) {
            // 对应path的文件实际内容
            var cookieStorage = require("/src/scripts/lib/cookieStorage.js");
            // ...
            // ...
            module.exports = LocalStore;
        }
    }
    
    // 对于模板 导出如下
    
    // file "/src/scripts/template/code.tpl" to module[srcscriptstemplatecodetpl]
    ___CONTEXT___.___MODULES___["srcscriptstemplatecodetpl"] = {
        path: "/src/scripts/template/code.tpl",
        fn: function(require, exports, module, window, undefined) {
            
            module.exports="\n    // file \"\" to module[]\n    ___CONTEXT___.___MODULES___[\"\"] = {\n        path: \"\",\n        fn: function(require, exports, module, window, undefined) {\n            \n            \n            \n        }\n    };\n\n"
            
        }
    };
    // file "/src/scripts/app-bmap.js" to module[srcscriptsappbmapjs]
    ___CONTEXT___.___MODULES___["srcscriptsappbmapjs"] = {
        path: "/src/scripts/app-bmap.js",
        fn: function(require, exports, module, window, undefined) {
            
            var LocalStorage = require("/src/scripts/lib/localStorage.js");
            // ... 
        }
            
    // 主文件执行
    require("/src/scripts/app-bmap.js");
})(this);