使用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模块了。
网友评论