amd-dependency已弃用。如何使用import＆＃34; module＆＃34;

Question

我们的Web应用程序（TypeScript 2.1.4）以amd模块为目标，并使用///<amd-dependency />加载带有requirejs的模板。 今天我们成功使用以下语法将html字符串加载到tpl变量中：

/// <amd-dependency path="text!tpl/components/header/header.view.html" name="tpl"/>
declare var tpl: string;

从此this directive is deprecated：

  

///＆lt; amd-dependency /＆gt;

     

此指令已被弃用。使用import＆＃34; moduleName＆＃34 ;;   而不是陈述。

要替换三重斜杠指令，我们在local.d.ts文件中使用了通配符模块：

declare module "text!*" {
    var _: string;
    export default _;
}

并将指令替换为：

import tpl from "text!tpl/components/header/header.view.html";

使用tsc进行编译很好，但加载模板失败。 查看js，编译产生：

define([text!tpl/components/header/header.view.html, ...],function(header_view_html_1, ...) method 按预期方式，然后在模块中使用header_view_html_1。默认。

调试js文件时，模板位于header_view_html_1变量中，而不在header_view_html_1.**default**属性中，但未定义。

为什么typescript会产生这个默认属性？如何避免它并保持header_view_html_1？

修改：我遵循了typescriptlang模块的引导Wildcard module declarations

declare module "json!*" {
    const value: any;
    export default value;
}
import data from "json!http://example.com/data.json";

Answer 1

您可能需要调整导入声明...

这会将所有内容导入模块的别名中。

import * as yourAlias from "..."

导入特定部件并直接使用。

import {thing, anotherThing} from "..."

Answer 2

由于我们正在将构建系统迁移到webpack2，我最终使用html-loader：

module: {
   rules: [
      {
         test: /\.html$/,
         use: "html-loader"
      }

并使用以下命令加载模板：

let tpl = require("./header.view.html");