Vue+SUI+Webpack填坑之路——解决zepto依赖

这段时间项目时间都比较紧，要学习的新东西可真不少。都没来得及消化整理输出。这个zepto.js的依赖问题其实是之前做人才库项目留下的一个坑，现在填上，虽然后面还有好多坑要填。。。

webpack中处理非模块化的文件

小标题有点晦涩，简单来说就是说如何加载第三方库！以引入zepto为例子，根据查找到的资料，下面给出几个方法

1 在html里的script标签中引入cdn,
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>

然后在webpack的配置文件中添加externals如:
externals: { zepto: '$' }

2 将zepto下载到本地，在webpack的配置文件中添加
resolve: { alias: { zepto: '/path/to/zepto.min.js' } }

3 官网文档Shimming:
这个做法会把文件一起打包。npm安装webpack-zepto这个模块，然后在webpack的配置文件中添加

resolve: {
  ...
  alias: {
      ...
      'zepto': path.join(__dirname, '../node_modules/webpack-zepto/index.js')
  }
},
plugins: {
  ...
  new webpack.ProvidePlugin({ // ProvidePlugin的作用是提供全局变量给每个模块,这样就不需要通过require引入了
      $: 'zepto',
      Zepto: 'zepto',
      'window.Zepto': 'zepto'
      })
}

SUI中Zepto.js版本选择问题

由于SUI本身使用的zepto版本的问题，之前一直都没有找到合适的解决方法。

最开始使用了官方的cdn，采取了方法1，但是没有成功导入依赖。中间尝试了方法2,但是当时大脑已经萌萌哒了，结果糊里糊涂的就是没成功。再尝试使用了方法3,这次虽然成功导入了依赖，但是SUI的插件报错，版本不兼容的问题——于是又一个坑。

一直卡在这个问题耗了许久时间，其实最后发觉这问题挺简单的——就是解决一个模块依赖的问题。之前关是弄明白我需要解决的问题就花了许久，脑子是浆糊的。。。然后又由于SUI的限制。。。官方建议是直接使用SUI官方CDN上的版本，但是采取方法1没成功应该是由于网络加载导致的，估计CDN不给力啊！之后我尝试把SUI官方提供的zepto下到本地之后采取类似的方法1总算把这个问题给解决了，至少开发的时候不会有问题了，之后的坑先不填╮(╯_╰)╭ 。

虽然现在解决也没什么卵用了。。不过也算给将来攒点经验，下次遇到类似的问题的时候的处理方法就会有眉目了。

关于问题解决的Plan B

上次人才库的项目可真是被我坑得飞起，最终由于技术储备不足，deadline逼近，迫不得已完全放弃vuejs的试水。直接采用SUI自动的一些插件和路由，通宵了两天连续加班5天，总算抱着可爱的同事们的大腿结束了项目。试想如果一开始直接有Plan B，那也许在Plan A失败的时候不至于那么窘迫。人呀都是逼出来的！

REF LINKS

gulp + webpack 构建多页面前端项目

webpack处理非模块化的几方法