文章/答案/技术大牛

发布

社区首页 >问答首页 >可以在TypeScript导入中指定一个webpack加载器吗？

问可以在TypeScript导入中指定一个webpack加载器吗？
EN

Stack Overflow用户

提问于 2016-12-10 03:35:03

回答 1查看 2.9K关注 0票数 9

我的项目是用TypeScript编写的，使用webpack来捆绑脚本。所有的.ts文件都会经过TypeScript加载器，以便将它们转换成JavaScript；我正在尝试弄清楚如何让一些特定的导入文件通过一个自定义的webpack加载器。类似于：

import widget from 'myCustomLoader!./widget';

当然，这是行不通的，因为TypeScript不知道如何解释webpack的装载器语法。理想情况下，TypeScript会忽略之前的所有内容！只需查看“./widget”就可以进行类型检查。

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

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

但是TypeScript仍然不能处理这个问题。显然，直接使用require是可行的：

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

那么我就失去了TypeScript提供的所有类型安全性。有没有人能建议一种方法来指定(或者以其他方式与之交互)定制的webpack加载器，并且仍然保持TypeScript导入语法的类型安全优势？

typescript

webpack

回答 1

Stack Overflow用户

发布于 2016-12-10 20:13:31

您是否考虑过在您的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"
      }
    ]
  }
}

当路径匹配时，这只允许‘`import widget from './widget’。

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

如果您的小部件还需要由ts-loader处理(因为您将其编写为一个typescript文件)，那么您也可以在您的配置中链接加载器。如果代码在进入ts-loader之前必须由自定义加载器处理，则类似于loader: "ts-loader!custom-loader"。

有关更多信息，请查看webpack docs on module loaders。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41067628

复制

相似问题

问可以在TypeScript导入中指定一个webpack加载器吗？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以在TypeScript导入中指定一个webpack加载器吗？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以在TypeScript导入中指定一个webpack加载器吗？
EN