webpack+qiniu+plupload 打包過(guò)程中的問(wèn)題記錄及解決辦法

wuyumin 發(fā)布于2019-08-20 17:58 / 1059人閱讀

摘要：最近項(xiàng)目告一段落，準(zhǔn)備將手里的項(xiàng)目改造成，也就是多頁(yè)面的打包，磕磕絆絆走過(guò)來(lái)，的導(dǎo)入，插件的封裝導(dǎo)入，的歸類導(dǎo)入，也都解決得還算順利。在原項(xiàng)目中，導(dǎo)入了以及。查看源碼后發(fā)現(xiàn)，中雖然訪問(wèn)了這個(gè)對(duì)象，但并沒(méi)有申明。

最近項(xiàng)目告一段落，準(zhǔn)備將手里的requirejs項(xiàng)目改造成webpack，也就是多頁(yè)面的打包，磕磕絆絆走過(guò)來(lái)，jQuery的導(dǎo)入，jQuery插件的封裝導(dǎo)入，css的歸類導(dǎo)入，也都解決得還算順利。只是今天碰到的上傳功能的打包，著實(shí)廢了一番心思。

項(xiàng)目中有一個(gè)上傳圖片的功能，用的是qiniu+plupload。在原項(xiàng)目中，導(dǎo)入了qiniu.js,moxie.js以及plupload.full.min.js。

在webpack項(xiàng)目中，我也同樣導(dǎo)入了這三個(gè)js，發(fā)現(xiàn)報(bào)錯(cuò)： Qiniu.uploader is not a function。于是上npm上查了下，發(fā)現(xiàn)這三個(gè)js在npm都有包，于是放棄導(dǎo)入本地的，換成npm安裝的包，結(jié)果仍然不行。

最后發(fā)現(xiàn)，qiniu.js被require的其實(shí)是一個(gè)空對(duì)象，查看源碼后發(fā)現(xiàn)：

最終的Qiniu對(duì)象并沒(méi)有用commonjs的標(biāo)準(zhǔn)拋出，于是添加

此時(shí)繼續(xù)報(bào)錯(cuò)： mOxie is not defined。查看源碼后發(fā)現(xiàn)，qiniu.js中雖然訪問(wèn)了mOxie這個(gè)對(duì)象，但并沒(méi)有申明。所以mOxie這個(gè)對(duì)象必定時(shí)掛在全局對(duì)象上的，但是commjs中沒(méi)有全局概念，于是考慮生成一個(gè)本地變量：

需要注意，moxie.js不要使用npm上的版本，npm上的沒(méi)有mOxie這個(gè)變量。

此時(shí)程序已能正常運(yùn)行，下面是我的部分代碼

GPU云服務(wù)器云服務(wù)器云服務(wù)器問(wèn)題及解決方法 Webpack打包分塊解決辦法的解決辦法

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/83967.html

相關(guān)文章

文件上傳的幾種方法——plupload篇

摘要：然鵝，因?yàn)槭且蟼鞯狡吲?，遇到了跨域的?wèn)題，嘗試過(guò)網(wǎng)上的幾種解決方法，都沒(méi)用。一開(kāi)始以為是一下子上傳太多張的緣故，就把改為，然鵝還是會(huì)報(bào)錯(cuò)。。。其實(shí)用這個(gè)組件之前，原先是想接著用webuploader的，畢竟用過(guò)了，比較熟悉，而且也很好用。然鵝，因?yàn)槭且蟼鞯狡吲?，遇到了跨域的?wèn)題，嘗試過(guò)網(wǎng)上的幾種解決方法，都沒(méi)用。只好用七牛文檔里面的plupload，hhhhhh，官方文檔推薦的，...

mingzhong 2019-08-20 16:49 評(píng)論0 收藏0
記錄一下前端分片上傳七牛云踩過(guò)的坑

摘要：后來(lái)查閱了資料后自己手動(dòng)實(shí)現(xiàn)了文件切片上傳到服務(wù)器基本需求已經(jīng)實(shí)現(xiàn)，但由于效率及穩(wěn)定性問(wèn)題后來(lái)決定還是直傳文件到七牛云?？偨Y(jié)起來(lái)七牛云上傳的套路就是后臺(tái)為你提供或者獲取的接口地址之后上傳的時(shí)候要帶上這個(gè)。起因最近在工作中有個(gè)上傳大文件的需求，原先咨詢過(guò)組里的大佬給我推薦了百度的webupload，但后來(lái)引入之后發(fā)現(xiàn)它是基于jquery封裝的。由于本身項(xiàng)目是基于vue開(kāi)發(fā)的所以與j...

ISherry 2019-08-21 11:51 評(píng)論0 收藏0
七牛云存儲(chǔ)---JavaScript SDK 簡(jiǎn)單上傳，走過(guò)的幾個(gè)坑

摘要：和七牛賬號(hào)里面提供。自己設(shè)定的七牛云存儲(chǔ)空間名，創(chuàng)建存儲(chǔ)空間的時(shí)候注意地區(qū)應(yīng)該默認(rèn)是華東，不一樣地區(qū)需要修改下里面指定的上傳的域名，請(qǐng)去參考官方文檔。若開(kāi)啟該選項(xiàng)，為自動(dòng)生成上傳成功后的文件名。先放上幾個(gè)用到的七牛官方網(wǎng)站： JavaScript SDK地址需要在頁(yè)面中先引入 plupload 提供的 plupload.full.min.js（生產(chǎn)環(huán)境）然后再引入SDK里的 qini...

or0fun 2019-08-20 15:19 評(píng)論0 收藏0
七牛 js JDK使用 - 上傳APP

摘要：背景介紹使用將包括安卓和上傳到七牛上傳所以不考慮數(shù)據(jù)處理使用后臺(tái)得到七牛上傳基于下面不詳述如何使用參見(jiàn)七牛上傳的簡(jiǎn)單案例也不詳述，參見(jiàn)官網(wǎng)事例很清楚了。指定上傳的目標(biāo)資源空間和資源鍵的長(zhǎng)度最大為字節(jié)。，表示只允許用戶上傳指定的文件。背景介紹使用JS將APP（包括安卓和IOS）上傳到七牛（上傳APP所以不考慮數(shù)據(jù)處理） uptoken使用JAVA后臺(tái)得到七牛上傳基于pluplo...

elva 2019-08-20 12:10 評(píng)論0 收藏0
Laravel中前端js上傳圖片到七牛云

摘要：以下中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡(jiǎn)單的流程實(shí)例。你的控制器地址請(qǐng)求成功之后，調(diào)用剛剛寫好的方法，把傳入過(guò)去讓頁(yè)面初始化的時(shí)候就請(qǐng)求這里差不多就可以啦，更多的操作參考文檔七牛云官方文檔以下Laravel中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡(jiǎn)單的流程實(shí)例。詳情請(qǐng)看官方文檔七牛云官方j(luò)s文檔 1. 首先引入相應(yīng)的js文件，下面是通過(guò)CDN引入的Staticfi...

jollywing 2019-08-20 19:08 評(píng)論0 收藏0