Webpack 中的 Typescript 定义文件

Question

好的，所以我有一个 Typescript 定义文件model.d.ts。它包含在我的业务逻辑中使用的类的定义，以便我可以在我的 Vue.js 文件中进行强类型输入。

我有一个 Vue.js 模板 person.vue，其代码部分如下所示：

<script lang="ts">
    import axios from "axios";
    import * as _ from "lodash";
    import * as model from "model";
    // ...
</script>

但是当我尝试使用 Webpack 构建它时，我遇到了问题：

ERROR in I:\git\myapp\src\component\person-page\person.vue.ts
[tsl] ERROR in I:\git\myapp\src\component\person-page\person.vue.ts(27,24)
      TS2307: Cannot find module 'model'.

ERROR in ../myapp/node_modules/ts-loader!../myapp/node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!../myapp/src/component/person-page/person.vue
Module not found: Error: Can't resolve 'model' in 'I:\git\myapp\src\component\person-page'
 @ ../myapp/node_modules/ts-loader!../myapp/node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!../myapp/src/component/person-page/person.vue 10:14-30
 @ ../myapp/src/component/person-page/person.vue
 @ ../myapp/src/main.ts
 @ multi webpack-hot-middleware/client ./src/main.ts

我正在使用ts-loader，我的webpack.config.js 的相关部分如下所示：

module.exports = {
    // ...
    module: {
        rules: [
            // ...
            {
                test: /.ts$/,
                use: {
                    loader: "ts-loader", options: {
                        appendTsSuffixTo: [/\.vue$/]
                    }
                },
                exclude: /node_modules/
            },
            // ...
            {
                test: /\.vue$/,
                loader: "vue-loader"
            }
        ]
    },
    resolve: {
        extensions: [".ts", ".js", ".vue", ".json"],
        alias: {
            "vue$": "vue/dist/vue.esm.js"
        }
    }
};

为什么我的定义文件不起作用，我怎样才能使它可以在person.vue中使用？

Answer 1

我认为你的路径有问题。 “model”应该指向没有文件扩展名的model.d.ts的完整路径。