resolve alias在编译typescript时提示找不到模块?

使用resolve.alias将一些模块路径指定了一个短的别名:

    resolve:{
        extensions: [' ', '.webpack.js', '.web.js', '.ts', '.js'],
        alias: {
            uapDir:path.resolve(__dirname,"src/uap")
        }
    },

在js文件中使用require('uapDir/abc')可以找到src/uap下的abc.js模块。但是webpack工程中的ts文件使用:

import * as abc from 'uapDir/abc'

却总是提示找不到uapDir/abc模块。按网上大神的说法,需要将webpack.config.js中的alias路径同步到tsconfig.json中,且必须指定baseUrl,修改后,效果如下:

  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "baseUrl":".",
    "paths":{
      "uapDir":["./src/uapDir"]
    }

重新编译仍旧报错。翻看webpack起步文档,不经意见看到tsconfig.js有个

"allowJs": true

把它添加至tsconfig.js后,编译正常!

总结
原来allowJs属性就是用来默认支持ts引入js文件的开头。默认是关闭的,所以ts在编译时无法引入js的模块,只能引入ts文件。将其打开后,ts即可引入js模块了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,710评论 7 110
  • 前端将大型项目分成一个个单独的模块,一般封装好的每个模块都会实现一个目的明确的完成的功能。如何处理这些模块以及模块...
    pixels阅读 3,438评论 1 14
  • publicPath指定了一个在浏览器中被引用的URL地址。 对于使用 和 加载器,当文件路径不同于他们的本地磁盘...
    飞呀飞哥阅读 1,718评论 0 0
  • 目录第1章 webpack简介 11.1 webpack是什么? 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 1,751评论 0 1
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,231评论 0 21