上篇是年后的项目搭建的,时间比较仓促,感觉有点low
1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷
2.不支持vue-loader一样写模版语言和es6语法
最近h5端的项目,用了webpack+vue-router,用jade+es6+stylus瞬间感觉自己高大上了,es6用起来,感觉也是爽爽哒。(其实语法用的也不多,也就import,一些简单的新方法,主要是箭头函数,再也不用self=this了)所以考虑进行一次升级,使在web端可以简单支持vue require的加载,因为webpack打包配置还是太麻烦了
vue的支持,template html字符串,我们可以通过模版nodejs模版编译生成html字符串,转成eqport的template属性进行支持.想了各种方式,没有实现css的支持,有啥好像方法,可以留言交流
下面是gulp插件的代码,参照的vue-loader
var through = require('through2'); var gutil = require('gulp-util'); var parse5 = require('parse5'); var deindent = require('de-indent'); var validateTemplate = require('vue-template-validator'); var jade = require('jade'); module.exports = function(opt){ function run (file, encoding, callback) { if (file.isNull()) { return callback(null, file); } if (file.isStream()) { return callback(new gutil.PluginError('gulp-vue', 'doesn\'t support Streams')); } file.contents = new Buffer(vueWrite(file, file.contents.toString())); file.path = file.path + '.js'; callback(null, file); } return through.obj(run); } var getHTML = {//暂时只做了jade模版的支持,需要别的模版对该对象进行扩展 'jade' : function (content) { return jade.compile(content, {})({}) }, 'default': function (content) { return content; } }; var splitRE = /\r?\n/g var emptyRE = /^\s*$/ var commentSymbols = { 'iced': '#', 'iced-jsx': '#', 'iced-redux': '#', 'coffee': '#', 'coffee-jsx': '#', 'coffee-redux': '#', 'purs': '--', 'ulmus': '--' } var vueWrite = function (file, content) { var output = { template: [], style: [], script: [] } var fragment = parse5.parseFragment(content, { locationInfo: true }); fragment.childNodes.forEach(function (node) { var type = node.tagName var lang = (getAttribute(node, 'lang') || 'default').toLowerCase(); var warnings = null if (!output[type]) { return } // node count check if ((type === 'script' || type === 'template') && output[type].length > 0) { throw new Error( '[glup-vue] Only one <script> or <template> tag is allowed inside a Vue component.' ) } // skip empty script/style tags if (type !== 'template' && (!node.childNodes || !node.childNodes.length)) { return } // template content is nested inside the content fragment if (type === 'template') { node = node.content if (!lang) { warnings = validateTemplate(node, content) } } // extract part var start = node.childNodes[0].__location.startOffset var end = node.childNodes[node.childNodes.length - 1].__location.endOffset var result if (type === 'script') { //将非script的内容进行当行注释,保持原文件行数,方便js错误查看 result = commentScript(content.slice(0, start), lang) + deindent(content.slice(start, end)) + commentScript(content.slice(end), lang) } else { result = deindent(content.slice(start, end)) } output[type] = { lang: lang, content: result, warnings: warnings } }) var lang = output.template.lang; if (!getHTML[lang]) { throw new Error( '[glup-vue] ' + lang + ' html engine not support' ) } /* return output.script.content + "\n;exports.default.template = '" + getHTML[lang](output.template.content, {}).replace(/(\\*)'/g, function (a, b) { return (b||"").replace('\\', '\\\\') + "\\'" }).replace(/\n/g, '\\\n') + "'"; */ //try { /*return output.script.content + "\n;exports.default.template = '" + getHTML[lang](output.template.content, {}).replace(/(\\*)'/g, function (a, b) { return (b||"").replace('\\', '\\\\') + "\\'" }).replace(/\n/g, '\\\n') + "'";*/ //对生成的html,'号进行替换,没有做多测试案例,可能有点小bug return output.script.content + "\n;exports.default.template = '" + getHTML[lang](output.template.content, {}).replace(/(\\*)'/g, function (a, b) { return (b||"").replace('\\', '\\\\') + "\\'" }).replace(/\n/g, '\\\n') + "';"; //} catch (e) { //console.log('message', e.message); //} } function commentScript (content, lang) { var symbol = getCommentSymbol(lang) var lines = content.split(splitRE) return lines.map(function (line, index) { // preserve EOL if (index === lines.length - 1 && emptyRE.test(line)) { return '' } else { return symbol + (emptyRE.test(line) ? '' : ' ' + line) } }) .join('\n') } function getCommentSymbol (lang) { return commentSymbols[lang] || '//' } function getAttribute (node, name) { if (node.attrs) { var i = node.attrs.length var attr while (i--) { attr = node.attrs[i] if (attr.name === name) { return attr.value } } } }
本来想把requirejs加载的支持代码拼接在上面,但是测试发现,拼接后babel语法报错了,所以把这块逻辑放到了gulp构建文件里面,并加入了sourcemaps支持
var gulp = require('gulp'); var vuefile = require("./gulp-vue"); var sourcemaps = require('gulp-sourcemaps'); var babel = require('gulp-babel'); var inject = require("gulp-inject-string"); gulp.task('default', () => { return gulp.src('src/js/**/*.vue') .pipe(sourcemaps.init()) .pipe(vuefile()) .pipe(babel({ presets: ['es2015'] })) .pipe(inject.wrap('define(function (require) {var exports = {};', ';return exports.default;\n});')) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('dist/js/')); });
这样我们就可以用requirejs+vue搭建项目了,这个方式缺陷就是css需要通过别的方式加载,也不支持写在vue文件当中。基于这个,我就可以修改我的 electron + vue项目了