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>
<link rel="stylesheet" href="/stylesheets/style.css">
<link rel="stylesheet" href="stylesheets/myEditor.css">
<link rel="stylesheet" href="lib/jquery-ui-1.12.1/jquery-ui.css">
<link rel="stylesheet" href="lib/jstree/themes/default/style.min.css">
</head>
<body>
<div class="fullRow" id="headerBar">ditor-user1-未命名.sg.</div>
<div id="workArea"></div>
<footer id="FooterBar" style="border:solid 1px;background-color:#c0c0c0">
<span style="text-align:center">歡迎光臨 @聯系作者</span>
</footer>
<div class="svgContainer">
<object class="svgClass" style="visibility:hidden;" id="svgObject" data="symbols.svg" type="image/svg+xml" height="0" width="0">
</div>
<script type="application/javascript" src="jquery-3.1.1.js"></script>
<script type="application/javascript" src="lib/jquery-ui-1.12.1/jquery-ui.js"></script>
<script type="application/javascript" src="jtopo0.4.8.js"></script>
<script type="module">
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 class="svgContainer">
<object class="svgClass" style="visibility:hidden;" id="svgObject" data="symbols.svg" type="image/svg+xml" height="0" width="0">
</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中，如下 ：
<script type="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打包与程序调试的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 蓝牙小电池图标_丽声小百科 | 乐趣助听
- 下一篇： 各层作用_土工布有什么作用呢？