當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

webpack打包jquery多页_Webpack打包与程序调试

發布時間：2024/9/19 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 webpack打包jquery多页_Webpack打包与程序调试小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Webpack終于打包成功了，也算發布了Demo，回頭繼續完善程序時，卻發現用webpack打包后的程序卻極難調試，也用了sourcemap選項，但依然難于調試，不報錯，但自己代碼本身功能實現有錯時，在Chrome根本無法追蹤源碼（也許本人功力不夠）。總不能調試弄一套代碼，打包又弄一套代碼吧？本人的想法是：調試和打包必須是同一套代碼，卻代碼都位于私有的src目錄中。

在調試時，如果直接將包含import和export的js文件放在public目錄中，然后用<script src=’./XX.js’>的形式也是行不通的，因為chorme本身并不直接支持import和export的語句，會報錯。好在chrome以<script type=module> import {XXXX} from ‘./YY.js’</script>的形式import,export了，所以在我的debug.html文件中，也采用了這種方式，以實現和webpack打包時的主頁文件index.js的形式一致。下面是我的debug.html文件

!DOCTYPE html>

<html>

<head>

<title>debug pug</title>

</head>

<body>

<div class="fullRow" id="headerBar">ditor-user1-未命名.sg.</div>

</footer>

</div>

import './jTopoExt.js'

import{MyEditor} from './myeditor.js'

$(document).ready(function() {

JTopo.editor = new MyEditor("workArea",JTopo);

});

</script>

</body>

</html>

整個程序以MyEditor為入口，在頁面加載完成后創建MyEditor對象。myeditr.js文件中有多個import語句引用了其他多個js文件。頁面中的以下幾行還引入了一個svg文件。

</div>

需要解決的問題有兩個：

問題１：所有的js文件不在public目錄中，所有必須在接到獲取js文件時，返回js文件。代碼如下（項目采用koa框架）：

if (ctx.request.path.indexOf('.js')!=-1) { // get js files

ctx.response.body = fs.readFileSync(path.join(__dirname,srcpath,ctx.request.path), 'utf8');

ctx.response.status = 200

ctx.response.type="text/javascript"

console.log('js file sent')

console.log(ctx)

} else

if (ctx.request.path === '/debug.html') { // 列表頁

ctx.response.status = 200;

ctx.response.type="string";

ctx.response.body = fs.readFileSync(path.join(__dirname,viewspath,ctx.request.path), 'utf8');

console.log(ctx)

} else {

ctx.throw(404, 'Not found') // 404

}

await next()

})

特別要注意返回對象的類型要正確設置

ctx.response.type="text/javascript"

由于缺少這條語句，chrome 會報“The server esponded with a non-JavaScript MIME type of 　text/plain”錯誤，我在此困擾一周而一籌莫展。

問題２：模塊的異步加載問題

Module標記中的js文件采用異步加載，很可能出現執行某行代碼的時，依賴的js文件尚未加載而報錯的情況，或者對象的onload回調函數無法執行，因為執行回調函數時，回調函數所在的js文件可能還未加載！！！

我的辦法一是將需順序執行的代碼按依賴順序放在同一module中，如下　：

import './jTopoExt.js'

import{MyEditor} from './myeditor.js'

$(document).ready(function() {

JTopo.editor = new MyEditor("workArea",JTopo);

});

</script>

二是用jquery的$(Object).ready方法替代window.onload方法和svg文檔對象的addEventListner(“load”,function(){})方法。

時間匆忙，僅作記錄，歡迎留言交流。折騰一周多，終于實現了調試項目和發布項目為同一套代碼的目標！

總結

以上是生活随笔為你收集整理的webpack打包jquery多页_Webpack打包与程序调试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：蓝牙小电池图标_丽声小百科 | 乐趣助听
下一篇： c# xml文件新增同级节点_[C#.N

编程问答

webpack打包jquery多页_Webpack打包与程序调试

由于缺少這條語句，chrome 會報“The server esponded with a non-JavaScript MIME type of text/plain”錯誤，我在此困擾一周而一籌莫展。

總結

由于缺少這條語句，chrome 會報“The server esponded with a non-JavaScript MIME type of 　text/plain”錯誤，我在此困擾一周而一籌莫展。