awesome-typescript-loader報(bào)watchRun問題

jubincn 發(fā)布于2019-08-26 11:54 / 3287人閱讀

摘要：在學(xué)習(xí)集成的過程中，遇到集成時(shí)報(bào)如下錯(cuò)誤。在報(bào)錯(cuò)之后錯(cuò)誤會(huì)在瀏覽器的控制臺(tái)里顯示，就是圖一的錯(cuò)誤顯示。報(bào)這個(gè)錯(cuò)的主要原因是加載器的版本和的版本不兼容導(dǎo)致官方有很多加載器的。

在學(xué)習(xí)webpack集成的過程中，遇到集成typescript時(shí)報(bào)如下錯(cuò)誤“Can not read property "WatchRun" of undefined”。如下圖：

此時(shí)如果打開編譯后的bundle.js在最底部會(huì)有如下代碼：

(function(module, exports) {

throw new Error("Module build failed: TypeError: Cannot read property "watchRun" of undefined
    at setupWatchRun (D:webpack projectwebpack持續(xù)集成3-1使用ES6語言
ode_modulesawesome-typescript-loadersrcinstance.ts:369:17)
    at Object.ensureInstance (D:webpack projectwebpack持續(xù)集成3-1使用ES6語言
ode_modulesawesome-typescript-loadersrcinstance.ts:137:2)
    at compiler (D:webpack projectwebpack持續(xù)集成3-1使用ES6語言
ode_modulesawesome-typescript-loadersrcindex.ts:47:19)
    at Object.loader (D:webpack projectwebpack持續(xù)集成3-1使用ES6語言
ode_modulesawesome-typescript-loadersrcindex.ts:16:12)");

/***/ })
/******/ ]);

這是因?yàn)閠ypescript的配置文件tsconfig.json中的sourceMap參數(shù)決定的：

這個(gè)參數(shù)就是為了方便調(diào)試typescript。在報(bào)錯(cuò)之后錯(cuò)誤會(huì)在瀏覽器的控制臺(tái)里顯示，就是圖一的錯(cuò)誤顯示。

報(bào)這個(gè)錯(cuò)的主要原因是typescript加載器的版本和webpack的版本不兼容導(dǎo)致：

官方有很多typescript加載器的loader。我用的是awesome-typescript-loader 5.0.0的版本，webpack版本此時(shí)是3.12.0版本的。把webpack版本更新到4.x可以解決了。

注意：4.x版本的webpack需要和webpack-cli配合使用，安裝完成后的package.json問價(jià)如下：

安裝之后重新編后的結(jié)果如下圖：

再打開瀏覽器頁面就可以正常顯示了，控制臺(tái)的報(bào)錯(cuò)也消失了。