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);