awesome-typescript-loader报watchRun问题

jubincn 发布于2019-08-26 11:54 / 3264人阅读

摘要：在学习集成的过程中，遇到集成时报如下错误。在报错之后错误会在浏览器的控制台里显示，就是图一的错误显示。报这个错的主要原因是加载器的版本和的版本不兼容导致官方有很多加载器的。

在学习webpack集成的过程中，遇到集成typescript时报如下错误“Can not read property "WatchRun" of undefined”。如下图：

此时如果打开编译后的bundle.js在最底部会有如下代码：

(function(module, exports) {

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

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

这是因为typescript的配置文件tsconfig.json中的sourceMap参数决定的：

这个参数就是为了方便调试typescript。在报错之后错误会在浏览器的控制台里显示，就是图一的错误显示。

报这个错的主要原因是typescript加载器的版本和webpack的版本不兼容导致：

官方有很多typescript加载器的loader。我用的是awesome-typescript-loader 5.0.0的版本，webpack版本此时是3.12.0版本的。把webpack版本更新到4.x可以解决了。

注意：4.x版本的webpack需要和webpack-cli配合使用，安装完成后的package.json问价如下：

安装之后重新编后的结果如下图：

再打开浏览器页面就可以正常显示了，控制台的报错也消失了。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107799.html

React全家桶环境搭建过程

摘要：环境搭建从零开始搭建开发环境引入安装依赖新建修改引入并支持安装依赖打包时将样式模块化，我们可以通过或引入样式，并且相互不冲突。修改，引入创建使用语法报错修改引入状态管理使用装饰器语法修改修改源码环境搭建 1.从零开始搭建webpack+react开发环境 2.引入Typescript 安装依赖 npm i -S @types/react @types/react-domnpm i -...

Genng 2019-08-22 17:20 评论0 收藏0
从零开始的webpack生活-0x012：TranspilingLoader装载脚本

摘要：概述上一章讲的是样式装载相关的，这一章见得是脚本加载相关的环境配置栗子加载安装依赖修改配置添加配置文件使用编写脚本打包并查看结果可以看到，语法被自动转化成了更多配置请查阅关于章节栗子加载安装依赖 0x001 概述上一章讲的是样式装载相关的loader，这一章见得是脚本加载相关的loader 0x002 环境配置 $ mkdir 0x012-transliling-loader $ c...

Tonny 2019-08-21 17:32 评论0 收藏0
浅析webpack源码之Compiler.js模块(八)

摘要：小尾巴最终返回了属性挂载把引入的函数模块全部暴露出来下面暴露了一些插件再通俗一点的解释比如当你你能调用文件下的方法这个和上面的不同在于上面的是挂在函数对象上的正题要想理解必须要理解再写一遍地址我们先简单的理解它为一个通过注册插件是插件的事 webpack.js小尾巴 const webpack = (options, callback) => { //... if (...

PumpkinDylan 2019-08-23 14:50 评论0 收藏0
9102年，隔壁公司新来的女实习生问我什么是TypeScript ？

摘要：它有时被称做鸭式辨型法或结构性子类型化。在里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。赋值后，和再也不能被改变了。函数的返回值类型是通过其返回值推断出来的此例是和。技术本身没有好坏，长远看，弱类型语言并不是那么的友好。 showImg(https://segmentfault.com/img/bVbwQe2?w=1792&h=1266); TypeScript不...

荆兆峰 2019-08-30 15:44 评论0 收藏0
9102年，隔壁公司新来的女实习生问我什么是TypeScript ？

摘要：它有时被称做鸭式辨型法或结构性子类型化。在里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。赋值后，和再也不能被改变了。函数的返回值类型是通过其返回值推断出来的此例是和。技术本身没有好坏，长远看，弱类型语言并不是那么的友好。 showImg(https://segmentfault.com/img/bVbwQe2?w=1792&h=1266); TypeScript不...

alighters 2019-08-26 11:00 评论0 收藏0