未找到 TSIFY 模块 html 文件。怎么修？

Question

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

这是我在运行执行 gulp 任务时遇到的错误。使用默认的 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 复制并粘贴了配置，只做了很少的改动，一切正常！

未找到 TSIFY 模块 html 文件。怎么修？

TSIFY module not found html file. how do fix?

browserify

typescript

vue.js

tsify