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失败的时候不至于那么窘迫。人呀都是逼出来的!

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

webpack处理非模块化的几方法

坚持原创技术分享,您的支持将鼓励我继续创作!