前端路上

枪在手，跟我走，前端路上不回头

0%

如何不用构建工具开发Vue全家桶项目

发表于 作者： 雅X共赏 本文字数： 13k 阅读时长 ≈ 12 分钟

Vue是目前最流行的前端开发框架之一，与Vue-router和Vuex组成俗称的Vue全家桶，更是开发前端富交互应用的利器。配合webpack等构建工具，开发大型应用也可以得心应手。随着Vue的普及，可能一些老旧项目也希望能“渐进式”的使用Vue，或者有的项目想用Vue来做但不打算引进构建工具，这种情况该怎样愉快的开发Vue全家桶项目呢？本文将提供一种解决方案。

构建工具的意义

首先应该明白构建工具的意义，是为了更好的实现模块化开发。具体来说就是开发的时候“拆”，发布的时候“合”，从而实现以模块为单位的关注点分离，以解决前端项目越来越庞大的背景下，单一开发者很难同时统筹项目所有细节的问题。具体来说都“拆”了什么，无非以下两方面：

  • 静态资源
  • 业务模块

静态资源的打包构建不是什么新鲜东西，编译啊合并啊压缩啊，都是老生常谈。

业务模块的拆分才是开发大型Vue项目的关键，也是构建工具在这里存在的最大意义。例如基于webpack使用Vue的单文件组件功能，使一个组件的所有部分（样式、模板、逻辑）都集中在一个.vue文件中管理，非常的方便。

除此之外构建工具通常还额外提供一些别的小恩小惠，比如实时刷新、代码压缩、md5戳等等，都不是很重要，替代方案也很多，这里就忽略它们了。

如何优雅的摆脱构建工具

不用构建工具不难，难的是同时实现模块化，没有构建工具的帮助，我们就要自己解决组件及依赖资源的互相引用和加载。核心思路是利用Vue的异步组件特性，借助前端模块加载器实现组件按需加载，只要能通过一个异步请求返回正确的组件对象，我们仍然可以以文件的形式组织组件！

下面就通过一个小例子来讲解具体如何实现这个方案。示例中用seajs作为加载器，对于借助seajs实现前端模块化开发另一篇讨论参见这里：Webpack是答案吗。

本文不对Vue全家桶及相关类库的使用做讲解，这部分内容请自行查阅文档。示例项目的完整代码及预览地址见文末链接。

文件组织

项目文件被分成两类，一类是通过加载器加载的，一类的是页面文件中直接引用的，为了开发方便应该尽可能将所有文件做模块化改造，但有一部分文件不适合也没有必要，比如类库，项目通用样式，图片文件等，所以这些文件被单独拎出来，项目的整体结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
|-- src/         //模块化文件
|  |-- assets/
|  |-- component/
|  |-- plugin/
|  |-- store/
|  |-- app.js
|  `-- router.js
|-- static/       //非模块化文件
|  |-- lib/
|  |-- css/
|  |-- font/
|  `-- images/
·-- index.html       //入口页面

文件加载

非模块化文件基本都是各种类库，主要是在入口页面中引用，没什么可说的，对于项目“本体”来说，已经彻底实现了模块化改造，可以说项目中的“一切皆是模块”。

访问入口页面会加载包括Vue三件套、seajs以及其他类库，然后seajs会加载并执行入口模块app.js，在入口模块中完成Vue实例的创建：

1
2
3
4
5
6
7
8
9
//app.js 部分代码
const router = require('js/router');
const store = require('js/store/store');

let app = new Vue({
	el: '#app',
	router,
	store,
	...

创建实例后会启动路由并跳转首页，路由中使用异步组件，此时会发起请求加载首页的路由组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//router.js 部分代码
const router = new VueRouter({
	base: seajs.root,
	routes: [{
		path: '/',
		component: function (resolve, reject) {
			require.async('js/component/main', function(main){
				resolve(main);
			});
		},
		children: [{
			path: '/channel/:cid',
			children: [{
				path: 'type/:tid'
			}]
		}]
	},
	...

创建实例的同时store也同时初始化完成了，store的”actions”,”getters”,”mutations”各部分的实现比较简单，请直接参考项目源码。

到这里项目就启动完成了。

组件的实现

上一小节是从宏观角度描述项目如何启动以及组件如何被加载，这里着重看一下Vue组件文件该如何实现。

一个Vue组件本质上是一个包含特定属性的对象，比如它可以包含template,components,created等等属性，因此只要是能返回这种对象的模块化文件，就已经是一个低配版的单文件组件了，像这样：

1
2
3
4
5
6
module.exports = {
	template: `hello ${name}!`,
	data() {
	  name: 'Vue'
	}
}

组件中很有可能还需要依赖其他资源，比如样式，比如插件，或者其他子组件，也都很容易通过加载器实现，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
define(function(require, exports, module) {
	"use strict";
	const box = require('box');   //加载插件
	const wilddogApp = require('js/assets/wilddog');

	module.exports = {
		template: `<div class="body flex-col">
  <v-head></v-head>
  <div class="flex-1 flex-col main">
    <v-nav></v-nav>
    <v-body></v-body>
  </div>
</div>`,
		components: {
			"v-head": require('js/component/head'), //加载子组件
			"v-nav": require('js/component/nav'),
			"v-body": require('js/component/body')
		},
		created: function() {
		...

如果组件希望独立管理自己的样式，seajs也有加载css的解决方案，可以参考src/plugin/dropdown.js里的实现。但就做不到.vue文件里的”scoped”特性了，这方面就需要开发者自己约定命名空间来避免冲突了。

插件的实现

与Vue组件类似，Vue插件本质上是一个包含”install”属性的对象，因此一个模块化的Vue插件大概是这样的：

1
2
3
4
module.exports = {
		install: function(Vue, options) {
			Vue.mixin({
			...

在全局方法Vue.mixin中就可以具体实现我们的插件功能了，这个插件可以这样被加载并调用：

1
2
const Dropdown = require('js/plugin/dropdown');
Vue.use(Dropdown);

由于插件本质上还是调用Vue.mixin方法，因此如果你的插件不需要参数的话，也可以省掉install这一层包装，这样插件模块一旦加载就会生效，也不需要调用Vue.use()方法了，效果一样。

最后

这个方案有明显的局限和短板，主要是由于组件加载会发起大量的请求，使项目整体运行效率受到影响，因此需要着重强调的是，组件最好不要一次同步加载，尽量的使用异步组件，分散各界面的加载压力，另外配合恰当的缓存方案，效果应该也不错。

项目代码：https://github.com/tower1229/WidgetsPlayground
预览地址：//refined-x.com/WidgetsPlayground/

前端路上原创技术文章，转载请注明出处：https://refined-x.com/2017/10/28/如何不用构建工具开发Vue全家桶项目/

看风景-公众号

不甘平庸的你，快来跟我一起充电吧，关注看风景，获取更多精彩内容。