typescript - 是否可以在 TypeScript 导入中指定 webpack 加载程序？

Question

我的项目是用 TypeScript 编写的，并使用 webpack 来打包脚本。所有 .ts 文件都通过 TypeScript 加载器，以便将它们转换为 JavaScript；我想弄清楚如何做的是让一些特定的导入通过自定义的 webpack 加载程序。像这样的东西:

import widget from 'myCustomLoader!./widget';

当然，这行不通，因为 TypeScript 不知道如何解释 webpack 的加载器语法。理想情况下，TypeScript 会忽略 ! 之前的所有内容。并出于类型检查的目的查看“./widget”。

我考虑的另一种可能性是通过在 webpack.config 中指定它来让所有 .ts 文件通过 myCustomLoader，然后使用某种查询字符串来指示它完成它的工作。例如:

import widget from './widget?myCustomLoader=true';

但 TypeScript 仍然无法处理。显然直接使用 require 就可以了:

var widget = require('myCustomLoader!./widget');

...但是我失去了 TypeScript 提供的所有类型安全性。任何人都可以建议一种方法来指定(或以其他方式与之交互)自定义 webpack 加载程序并仍然保持 TypeScript 导入语法的类型安全优势吗？

Answer 1

您是否考虑过在您的 webpack 配置中为不同的情况配置两个加载器？可以为每个加载程序配置定义包含和排除。这可能是一种通过定义两个条目来解决您的问题的方法，一个仅用于 ts-loader，一个用于 custom-loader。

{
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, "app/src/special/widgets")
        ],
        loader: "custom-loader"
      },
      {
        test: /\.ts$/,
        exclude: [
          path.resolve(__dirname, "app/src/special/widgets")
        ],
        loader: "ts-loader"
      }
    ]
  }
}

这允许在路径匹配时仅“从'./widget'导入小部件。

另一种选择是在小部件上添加一个特殊的测试，如果您可以轻松地将它与正则表达式匹配的话。

如果您的小部件也需要由 ts-loader 处理(因为您将其编写为 typescript 文件)，您也可以在您的配置中链接加载器。这看起来像 loader: "ts-loader!custom-loader" 如果代码在进入 ts-loader 之前必须由自定义加载器处理。

请检查webpack docs on module loaders了解更多信息。