使用fis3打包单文件vue组件
在项目开发过程中,我们常把页面拆分成一个个小组件,每个组件由css、模板、js组成。 一般情况下,三个部分我们分别写在不同的文件中,但是假如页面有很多小组件,每个组件都拆分成三个文件,最终就会产生大量的小文件,不便于管理。 这时我们通过将组件的三个部门写在同一个文件来避免多个小文件,并且每个组件一个文件也更加直观。 参考webpack和browserify打包单文件组件 和fis3-parser-vue
详细说明 1.首先新建一个项目,文件目录如下 1
2
3
4
5
6
7
+-- index.html
+-- weight
|-- app.vue
+-- js
|-- base
|-- vue.js
|-- mod.js
文件weight/app.vue 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// weight/app.vue
<style>
h1 {
color: #f00;
}
</style>
<template>
<h1>{{msg}}</h1>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
文件index.html 1
2
3
4
5
6
7
8
9
10
11
12
13
<app></app>
<script src="js/base/mod.js"></script>
<script src="js/base/vueify-insert-css.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.安装打包工具 1
2
3
4
5
6
7
8
9
10
11
12
13
### 全局安装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相关模块(根据需要选择安装)
npm install babel-plugin-transform-runtime
npm install babel-preset-es2015
npm install fis-parser-babel2
### vue
npm install fis3-parser-vue
3.编写fis-conf.js 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
fis.hook('module' , {mode : 'auto' });
fis.hook('relative' );
fis.match('**' , {relative : true });
fis
.match(/\.vue$/i , {
rExt : '.js' ,
isMod : true ,
isJsLike : true ,
isComponent : true ,
parser : fis.plugin('vue' )
})
.match("*.js" , {
isMod : false ,
isES6 : false ,
isComponent : false ,
useHash : false ,
parser: fis.plugin('babel2' )
})
.match('::package' , {
sourceMap: true ,
postpackager: fis.plugin('loader' , {})
})
4.编译 执行 fis3 release -d output ,即可看到文件output/weight/app.js 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// weight/app.js
define('weight/app.vue', function(require, exports, module) {
var __vueify_style__ = require("vueify-insert-css").insert("\nh1 {\n color: #f00;\n}\n")
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = {
data: function data() {
return {
msg: 'Hello world!'
};
}
};
if (module.exports.__esModule) module.exports = module.exports.default
;(typeof module.exports === "function"? module.exports.options: module.exports).template = "\n<h1>{{msg}}</h1>\n"
});
但是”vueify-insert-css”是什么鬼? 通过浏览器打开查看,会提示”mod.js:65 Uncaught Error: Cannot find module vueify-insert-css
“
5.修复 在项目中搜索 vueify-insert-css,会发现fis3-parser-vue中使用了模块vueify-insert-css,打开项目,就一个文件 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var inserted = exports.cache = {}
exports.insert = function (css) {
if (inserted[css]) return
inserted[css] = true
var elem = document.createElement('style')
elem.setAttribute('type', 'text/css')
if ('textContent' in elem) {
elem.textContent = css
} else {
elem.styleSheet.cssText = css
}
document.getElementsByTagName('head')[0].appendChild(elem)
return elem
}
稍微改造一下就可以了 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// js/base/vueify-insert-css.js
define('vueify-insert-css', function (require, exports, module) {
var inserted = exports.cache = {}
exports.insert = function (css) {
if (inserted[css]) return
inserted[css] = true
var elem = document.createElement('style')
elem.setAttribute('type', 'text/css')
if ('textContent' in elem) {
elem.textContent = css
} else {
elem.styleSheet.cssText = css
}
document.getElementsByTagName('head')[0].appendChild(elem)
return elem
}
});
放在js/base目录,html中直接引入,重新打包,ok
6.存在问题
fis3-parser-vue组件对less的支持有问题,单文件中暂时无法使用less语法。sass没有试过,感兴趣的同学可以动手试试看
部分编辑器可能不支持单文件vue语法高亮,使用html格式即可