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