浅谈webpack下的AOP式无侵入注入

说起来, 面向切面编程(AOP)自从诞生之日起，一直都是计算机科学领域十分热门的话题，但是很奇怪的是，在前端圈子里，探讨AOP的文章似乎并不是多，而且多数拘泥在给出理论，然后实现个片段的定式）难免陷入了形而上学的尴尬境地，本文列举了两个生产环境的实际例子论述webpack和AOP预编译处理的结合，意在抛砖引玉。当然，笔者能力有限，如果有觉得不妥之处，还请大家积极的反馈出来， 共同进步哈。

重要的概念

AOP： 面向切面编程，通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术。

Joint point：表示在程序中明确定义的点，典型的包括方法调用，对类成员的访问以及异常处理程序块的执行等等，它自身还可以嵌套其它 joint point。

Advice：Advice 定义了在 pointcut 里面定义的程序点具体要做的操作，它通过 before、after 和 around 来区别是在每个 joint point 之前、之后还是代替执行的代码。

通过前面的定义，我们可以提炼出一句更简单的定义，利用静/动态的方式使代码块在何时/何地运行。

性能统计

项目的背景是一个利用vue+webpack打造的多页面应用 （多入口点），她的结构大概是这个样子的

var baseConf = {// code hereentry: {index: 'src/index',list: 'src/list',detail: 'src/detail',// and so on ...},// code here}

然后以index入口点举例，大概代码为src/index/index.js

import Vue from 'vue'import App from './app'new Vue({el: '#app',render: h => h(App)})

期望引入一个vue插件，能够自动的监控当前页面的性能，于是，代码看起来像是这个样子

import Vue from 'vue'Vue.use(performance) //性能统计import App from './app'new Vue({el: '#app',render: h => h(App)})

由于这种方式意味着每个入口点均需要进行修改，(实际上这个项目的入口点超过30个，而且随时可能继续增加下去)简直就是一个体力活。所以，让我们用AOP的思想来考虑一下如何处理这个问题

首先观察入口点逻辑

原：引入vue -> 引入app组件 -> 实例化vue组件

新：引入vue -> 应用性能统计组件 -> 引入app组件 -> 实例化vue组件

套用到我们的定义上，可以轻松的得到

Joint point(何处) 引入vue

advice(何时) 之后

这样理论上的东西似乎闭着眼睛都可以推论出来，但是如何将这样的步骤替换到每一个入口点就是一个大问题了orz。幸运的是这是一个import，而翻阅webpack的文档恰好有着这样一个神奇的属性--alias

resolve: {alias: {'vue$': resolve('src/vueHook.js')}

src/vueHook.js

import vue from 'vue/dist/vue.common'vue.use(performance)export default vue