TSIFY模块未找到html文件。如何修复？

Question

我有一个导入HTML页面的vue组件。

这是我在运行吞咽任务时得到的错误。这可以转换为默认的typescript 2.5。但当我通过browserify和tsify运行它时，它就崩溃了。

错误:找不到模块'detail.html‘

以下是我的代码

gulp任务

gulp.task('build:workOrderDetail', function () {
    return browserify("src/WorkOrder/Detail/detail.ts")
        .add("src/html-shim.ts")
        .plugin("tsify", { project: 'tsconfig.json' })
        .bundle()
        .pipe(gulp.dest("dist/workorder-detail.ts"));
});

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "moduleResolution": "node",
    "experimentalDecorators": true
  },
  "exclude": [
    "node_modules",
    "wwwroot",
    "dist"
  ]
}

组件页面

import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import Template from 'detail.html'

@Component({
})

export default class DetailView extends Vue {
    @Prop() workOrderId: number;
    template: string = Template;
    data() {
        return {
            message: 'hello'
        }
    }
}

html-shim.ts

declare module "*.html" {
    const Content: string;
    export default Content;
}

Answer 1

我最终放弃了Browserify，转而使用webpack。基本上从这里复制并粘贴配置，https://github.com/Microsoft/TypeScript-Vue-Starter/blob/master/webpack.config.js只需最少的更改，一切都正常！