使用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> 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格式即可