angularjs + fis +modJS 对于支持amd规范的组建处理(PhotoSwipe 支持,百度webUpload支持)
这不是很好的处理方式,但是能够解决问题,希望有大神推荐更好的方式。
前端模块使用angularjs + fis +modJS 开发前端应用有两个月了。总结了以下的优点:
-
fis 自动构建,自动发布,功能非常方便
-
modJS 的require方式 类似写 nodejs ,写起来方便(后面才知道坑就在这里)
-
因为angular在模块化中做了很多事情,所以基于amd 的模块化其实很清淡,大部分是用来加载一些别人写的类库。
问题1: 解决PhotoSwipe 支持
1:导入PhotoSwipe就是放入libs 文件夹下,(你的不一定叫libs)
2: 封装成一个指令,便于使用其他地方使用。
3: require(photoSwipe);
4: 打开console,发现 PhotoSwipe is undefined ,为啥呢?
;(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(factory);
} else if (typeof exports === 'object') {
module.exports = factory();
} else {
root.PhotoSwipe = factory();
}
})(this, function () {
因为有这个头,官方声明为了兼容requirejs 的amd 方式,很多流行库中都有这么一段大同小异的代码,
然而 modJS 自动打包以后会自动添加
define('photoswipe', function(require, exports, module){}
导致无法实例化 PhotoSwipe
解决方式:
将this
改成 window
,同时 将 var PhotoSwipe
= 改成 window.PhotoSwipe
; 解决问题;
问题2: 百度上传插件;
同样的问题 WebUpload 无法初始化, 但是细心的你一定发现无法像上面那么添加window 修改,因为 里面已经写 window了
解决方式:
因为webUpload有自己的加载方式,用的是 require
,而这个 require
跟 modJs
的 require
是冲突的,
将 require
修改为 _require
问题解决;
如开头所说,这不是理想的解决方式,甚至是不正确的方式,如有好的方法,麻烦留言告,感谢!
自吹自擂的互联网