webpack打包avalon＋oniui+jquery
随着avalon的发展壮大，我根据CSDN的统计数字，中国前端大概有1％的人在使用avalon了。
avalon的最大优势是能兼容IE6，并且其API是非常稳定，只是在1.3.7 对ms-duplex的拦截器做了一次改动（但这次改动也向下兼容），1.5中去除avalon.define的旧风格支持，废掉ms-widget指令改成更强大的自定义标签指令。相对于其他MVVM框架来说，是非常的良心。此外，配套是非常完善，尤其是oniui，也支持到IE6。至于对移动端啊，微信啊，支持也非常好，难怪每天加群的人这么多。
不过，一个问题是，avalon没有提供打包机制，虽然官网有教如何用requirejs打包avalon(比如滴滴出行，他们则是用fis3打包avalon )，但也有一些小公司，因为前端团队实力不济，无法实现打包。因此就有了这篇文章了。
本文是使用当今最强大的构建工具webpack实现的，各种看官首先得装上npm。
建立一个新工程（我是将此工程起名为oni）, 然后用npm初始化它，目的是建立一个package.json文件：
其实我对webpack也不怎么熟，主要是参考如下中文教程开始玩的
- webpack前端模块加载工具
- 一小时包教会 —— webpack 入门指南
- Webpack 怎么用
- 30分钟手把手教你学webpack实战
/>
我思度一下，估计没有像我这样混用CommonJS与AMD两种风格，问题是出在加载CSS上，难道正则有问题吗？试了好久，没有办法，自己写预加载器，从avalon.accordion的源码中干掉css!字样。
具体过程如下，在oni/node_modules目录下建立一个amdcss-loader目录，结构如下：
<img src="https://www.likecs.com/dist/bundle.js"></script>
<style>
body{
padding:2em;
}
</style>
</head>
<body ms-controller="test">
<h1>{{aaa}}</h1>
<div ms-widget="accordion,$,$opts"></div>
</body>
</html>
然后打开你的页面就行看到效果了（我是使用netBeans直接运行，大家也可以试一下webpack-dev-server）
不过，我其实不希望大家将jquery与avalon都打包进去的，因为这两个库比较常用，几乎每个页面都有，建立放到CDN中，用script独立引入。详见
《Webpack 性能优化 （一）（使用别名做重定向）》一文。
至此，本文完毕。我是希望avalon社区能使用更强大的工具进行打包，而不是用requriejs之流了。
原文链接：https://www.cnblogs.com/rubylouvre/p/4963984.html
本文来源 爱码网，其版权均为 原网址 所有 与本站无关，文章内容系作者个人观点，不代表 本站 对观点赞同或支持。如需转载，请注明文章来源。
相关文章
