angularjs + fis +modJS 对于支持amd规范的组建处理(PhotoSwipe 支持,百度webUpload支持)

时间:2023-03-08 20:21:51

这不是很好的处理方式,但是能够解决问题,希望有大神推荐更好的方式。

前端模块使用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,而这个 requiremodJsrequire 是冲突的,

require 修改为 _require

问题解决;

如开头所说,这不是理想的解决方式,甚至是不正确的方式,如有好的方法,麻烦留言告,感谢!