fis3-preprocessor-vue-tmpl

Note: 仅支持在fis3中使用，不支持`.vue`形式的单文件

功能说明

fis3-preprocessor-vue-tmpl是一款用于在fis3构建时对vue2.0的模板进行编译的插件，支持的特性包括：

• commonjs方式引用js模块
• babel解析ES2015语法
• 直接引用npm模块
• 构建时预编译vue2.0的模板为Render函数
• 保持对fis3内置语法（__inline/__uri()）的支持

特性描述

由于vue2.0支持独立构建与运行时构建，因此采用Runtime-only build可以减少运行时的代码体积。

然而，使用这种方式并不支持template属性，仅能对单文件中的模板进行编译，或者就是直接写渲染函数。当项目较为大型时，单文件的书写方式可能导致一个文件中的代码量较多，三种资源混杂在一起可能并不是太方便管理，而直接写渲染函数又并不是太直观。

当我们使用fis3时，会直接在xxx.html中写模板，并使用template: __inline('xxx.html')这样的方式来引用模板，从而让代码量较多的组件可以合理地组织三种资源（html/css/js）。与直接写渲染函数相比，贴近HTML的模板语法，可读性更友好一些。

从渲染的过程来看，无论template属性中引用的模板代码，抑或是单文件(.vue)中的模板最终都会被vue的编译器编译为Render函数，再渲染为virtual dom，我们因此可以将模板编译的过程提前到构建阶段，这样就可以减少运行时编译所产生的耗时。

这个插件本质上是将fis3的__inline()语法替换为Vue.compile，既保持开发时贴近HTML的模板语法，又在构建时就完成了模板的编译。

安装

局部安装

npm install fis3-preprocessor-vue-tmpl --save-dev

全局安装

npm install fis3-preprocessor-vue-tmpl -g

使用

//fis-conf.js

fis.match('main.js', {
    preprocessor: fis.plugin('vue-tmpl', {
        browserify: {
            debug: true
        },
        es2015: {
            enable: true,
            presets: ['es2015', 'stage-2']
        }        
    })
});

• 其中browserify中的配置与browserify opts保持一致。
• 若要启用es2015支持，需要将es2015选项中的enaable属性配置为true，presets属性才会生效。