Question

我的项目是用TypeScript编写的，并使用webpack捆绑脚本。所有.ts文件都通过TypeScript加载器，以便将它们转换为JavaScript;我想弄清楚如何做一些特定的导入通过自定义webpack加载器。类似的东西：

import widget from 'myCustomLoader!./widget';

当然，这不起作用，因为TypeScript不知道如何解释webpack的加载器语法。理想情况下，TypeScript会忽略之前的所有内容！然后看看＆＃39; ./ widget＆＃39;用于类型检查。

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

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

但是TypeScript仍然无法解决这个问题。显然直接使用require会起作用：

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

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

Answer 1

您是否考虑在webpack配置中为不同的情况配置两个加载器？有可能为每个加载器配置定义包含和排除。这可以通过仅定义两个条目来解决您的问题，一个仅用于ts-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"
      }
    ]
  }
}

这允许只是从'＆＃39; ./ widget＆＃39;导入小部件。当路径匹配时。

如果您可以轻松地将其与正则表达式匹配，则另一个选项是在窗口小部件上添加特殊test。

如果你的小部件也需要由ts-loader处理（因为你把它写成了打字稿文件），你也可以在你的配置中链接加载器。如果代码在进入ts-loader之前必须由自定义加载器处理，那么它看起来像loader: "ts-loader!custom-loader"。

请查看webpack docs on module loaders了解详情。

是否可以在TypeScript导入中指定webpack加载器？

1 个答案: