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
问题解决;
如开头所说,这不是理想的解决方式,甚至是不正确的方式,如有好的方法,麻烦留言告,感谢!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?