在我的一个项目中,我引入了Vue来做一些前端工作,但在TypeScript和jQuery中仍然有很多遗留代码。所有遗留代码都在'ts'文件夹中,新的Vue单文件组件和一些引导ts文件都在'src'中。在VSCode中看起来一切正常,甚至直接在命令行上调用'tsc'也能正常工作,但是当我从'ts'文件夹中导入声明/定义(模块)时,WebPack总是抱怨。
项目文件夹结构
+ root
+ php/css/etc
+ ts
+ models
- LegacyTypeScriptModules.ts
- PlanDate.ts
+ js-defs
- tools.d.ts
- tsconfig.json (to be able to build only legacy code)
+ src
+ components
- RecentChanged.vue
+ pages
- Welcome.vue
- App.vue
- main.ts
- tsconfig.json (main configuration)
- package.json
- tsconfig.json (only fixing experimentalDecorators issue in VSCode)
- tslint.json
- webpack.config.js
错误消息npm生成
找不到./ts/models/plandate.ts模块中的错误:错误:无法解析“/users/username/dev/project-root/ts/models”@中的“js-defs/tools”。/ts/models/plandate.ts 1:0-45@./node_modules/ts-loader!./node_modules/vue-loader/lib/selector。js?type=script&index=0!
“src”文件夹中的主tsconfig.json
{
"compilerOptions": {
"target": "es5",
"strict": true,
"module": "es2015",
"moduleResolution": "node",
"lib": [
"dom",
"es2015",
"es2015.iterable"
],
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"baseUrl": ".",
"paths": {
"*": [
"*",
"./*",
"../ts/*"
]
}
},
"include": [
"**/*",
"../ts/**/*"
]
}
webpack.config.js
module.exports = {
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.ts$/,
loader: "ts-loader",
exclude: /node_modules|vue\/src/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
},
extensions: ['.js', '.vue', '.json', '.ts'],
modules: [
'node_modules',
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'ts')
],
...
导入旧版ts模块的第一个Vue文件
import Vue from 'vue'
import { ChangedItem } from '../../ts/models/ChangedItem'
import { PlanDate } from "../../ts/models/PlanDate"
import { Customer } from "../../ts/models/Customer"
import { Component, Prop } from 'vue-property-decorator'
@Component
export default class RecentChanged extends Vue {
...
给出错误的类/模块
import { IDate, IDateSink, IDateSource} from "./interfaces/IDate";
import { addDays, pad } from "js-defs/tools";
export class PlanDate implements IDate {
...
找不到的模块
import { IMainOptions } from "models/interfaces/IOptions";
export declare function addDays(d: IDate, n: number, keepTime?: boolean): IDate;
export declare function pad(inputString: any, width: number, paddingCharacter?: string): string;
注意,第一个问题已经是,我似乎不能让绝对路径在Vue SFC中工作,所以我已经不得不妥协到一个丑陋的相对路径。(也许已经是问题的第一个征兆了?)Vue中的绝对路径问题在VSCode,tsk和WebPack上是一致的,但我对此有单独的问题。我也有问题的一些绝对路径在遗留的打字类,但我可以想象这是因为它似乎只工作从'ts'文件夹和更深,但我不认为这是相关的,因为WebPack似乎没有抱怨导入'idate'。
由于bare typescript编译器在查找声明模块方面没有问题,而且VSCode language server也没有抱怨,所以我假设这是WebPack的配置文件中的一个问题,但也许我遗漏了/忽略了什么。
我尝试了声明模块的绝对路径和相对路径,但都失败了。还尝试了其他不依赖于其他遗留模块的遗留类,它们看起来确实起作用了。所以看起来模块解析在声明文件上失败了。在webpack.config.js中,我已经尝试了resolve.alias和resolve.modules这样的东西,但它们都不起作用,或者我不知道如何定义路径。
更新
在下面给出的第一个评论和答案之后,我很确定这与我自己的声明文件是如何定义的、我应该如何导入它或者我如何配置WebPack来正确地找到它有关。有人能告诉我如何在VUE+WebPack+TypeScript中使用声明文件,而不会出现“module not found”或“no output emitted”错误吗?
这可能是因为文件的扩展名为d.ts
,您的配置设置为在导入时只查找.ts
扩展名?