laomu1988/fis3-vue-demo

fis3打包单文件vue组件demo

使用fis3打包单文件vue组件

在项目开发过程中，我们常把页面拆分成一个个小组件，每个组件由css、模板、js组成。 一般情况下，三个部分我们分别写在不同的文件中，但是假如页面有很多小组件，每个组件都拆分成三个文件，最终就会产生大量的小文件，不便于管理。 这时我们通过将组件的三个部门写在同一个文件来避免多个小文件，并且每个组件一个文件也更加直观。 使用fis3-parser-vue-component

详细说明

1.首先新建一个项目，文件目录如下

+-- index.html
+-- weight
    |-- app.vue
+-- js
    |-- base
        |-- vue.js
        |-- mod.js

文件weight/app.vue

// weight/app.vue
<style>
h1 {
   color: #f00;
}
</style>

<template>
<h1>{{msg}}</h1>
</template>

<script>
export default {
    data () {
        return {
            msg: 'Hello world!'
        }
    }
}
</script>

文件index.html

<app></app>
<script src="js/base/mod.js"></script>
<script src="js/base/vue.js"></script>
<script>
    var App = require('weight/app.vue');
    new Vue({
        el: 'body',
        components: {
            app: App
        }
 });
</script>

2.安装打包工具

### 全局安装fis3
npm install fis3 -g -d
npm install fis3-hook-module -g -d
npm install fis3-hook-relative -g -d
npm install fis3-postpackager-loader -g -d

### es6 vue相关模块
npm install fis-parser-babel-5.x
npm install fis3-parser-vue-component

3.编写fis-conf.js

// fis-conf.js

// 开启模块化包装amd，cmd
fis.hook('module', {mode: 'auto'});

// 使用相对路径。
fis.hook('relative');
fis.match('**', {relative: true});

fis
    // 打包vue文件
    .match(/\.vue$/i, {
        rExt: '.js',
        isMod: true,
        isJsLike: true,
        isComponent: true,
        parser: [fis.plugin('vue-component'), fis.plugin('babel-5.x')]
    })
    // 普通js不增加module名称
    .match("*.js", {
        isMod: false,
        isES6: false,
        isComponent: false,
        useHash: false,
        // 设置js文件为babel解析，支持es6的写法。
        // parser: fis.plugin('babel-5.x')
    })

    .match('::package', {
        // npm install [-g] fis3-postpackager-loader
        // 分析 __RESOURCE_MAP__ 结构，来解决资源加载问题
        // allInOne: true, //js&css打包成一个文件
        sourceMap: true, //是否生成依赖map文件
        // useInlineMap: true //是否将sourcemap作为内嵌脚本输出
        postpackager: fis.plugin('loader', {})
    })

4.编译

执行 fis3 release -d output,即可看到文件output/weight/app.js和output/weight/app.css

5. 其他语言支持

• less,scss等编译语言可以参考fis3-parser-vue-component进行配置
• 部分编辑器可能不支持单文件vue语法高亮，使用html格式即可

fis3-vue-demo's Issues

编译时报错，尝试把fis3-parser-vue 换成fis-parser-vue 就正常了

[ERROR] parser.vue: content.trim is not a function [/Users/magic/Downloads/fis3-vue-demo-master/weight/app.vue]
尝试把fis3-parser-vue里的用fis3编译的一段注释掉就好了
'use strict';

var compiler = require('vueify-sync').compiler;

module.exports = function (content, file, conf) {
var result = '';
// 用 HTML 相关语言能力处理一遍
// if (fis.compile.partial && file.ext === '.vue') {
// try {
// content = fis.compile.partial(content, file, {
// ext: '.html',
// isHtmlLike: true
// });
// } catch(e) {
// console.log(e);
// }
// }
try {
result = compiler.compileSync(content.toString('utf8'), file.realpath);
} catch (e) {
console.log(e.stack);
}
return result;
};

运行报错

用fis3 release的时候报错

 [ERROR] parser.vue: content.trim is not a function [/Users/magic/Downloads/fis3-vue-demo-master/weight/app.vue]