使用gulp将Vue.component文件中的template转成render函数

　　在使用vue.js开发项目的时候，如果不能用webpack，要以传统方式开发项目的话，我们会将每个组件写成

Vue.component形式的js文件，然后直接在页面中引入。但是ie浏览器有时候不支持template形式的模板html，

这个时候就要用到一个gulp插件vue-template-inline，将js文件中的template转成ie支持的render函数。

　　插件github地址：https://github.com/leeseean/v...，求star，多谢！

使用说明

安装

npm install vue-template-inline --save-dev

用法

未经处理前的js文件

myView.js

Vue.component('example', {
    template: `
        <div>
            <div v-if="show" v-for="(item, index) in list">{{item}}</div>
        </div>
    `,
    data() {
        return {
            show: true,
            list: [1,2,3,4,5],
        };
    }
});

引入vue-template-inline处理js文件：

var inlineVue = require('vue-template-inline');

gulp.task('inline-vue', function () {
  return gulp.src('./src/**/*.js')
    .pipe(inlineVue())
    .pipe(gulp.dest('./dist'));
});

输出处理后的js文件:

myView.js

"use strict";
Vue.component("example", {
    render: function () {
        var n = this,
            e = n.$createElement,
            r = n._self._c || e;
        return r("div", n._l(n.list, function (e, t) {
            return n.show ? r("div", [n._v(n._s(e))]) : n._e()
        }))
    },
    data: function () {
        return {
            show: !0,
            list: [1, 2, 3, 4, 5]
        }
    }
});