Webpack 和 rxjs - “你可能需要一个合适的加载器”错误

Question

我刚刚将带有 npm 的 rxjs 安装到我的打字稿项目中。

在将

import {take, map} from "rxjs/operators"

包含到一个文件中之后，任何后续的

npx webpack

尝试都会失败，并给出以下错误的许多实例：

ERROR in ./node_modules/rxjs/dist/types/internal/util/noop.d.ts 1:7
Module parse failed: Unexpected token (1:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> export declare function noop(): void;
| //# sourceMappingURL=noop.d.ts.map
 @ ./node_modules/rxjs/dist/types/index.d.ts 23:0-44 23:0-44

供参考，这里是导致问题的

noop.d.ts.map

文件（这是许多类似的文件之一）。我猜这个问题就发生在

declare

令牌：

export declare function noop(): void;
//# sourceMappingURL=noop.d.ts.map

这是我的

webpack.config.js

：

const path = require('path');

module.exports = {
  entry: './src/app.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: 'ts-loader'
        },
        exclude: /node_modules/,
      }
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.d.ts'],
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

我在

package.json

中安装的依赖项：

  "devDependencies": {
    "@types/node": "^18.15.1",
    "babel-loader": "^9.1.2",
    "ts-loader": "^9.4.2",
    "ts-node": "^10.9.1",
    "typescript": "^5.0.2",
    "webpack": "^5.76.1",
    "webpack-cli": "^5.0.1"
  },
  "dependencies": {
    "node-sass": "^8.0.0",
    "rxjs": "^7.8.0",
    "save-dev": "^0.0.1-security"
  }

知道如何克服这个问题吗？提前致谢。

Answer 1

也许您可以使用 dts-loader 来解决该错误。

npm install --save-dev dts-loader

然后在你的

webpack.config.js

规则中添加这个

{
    test: /\.d\.ts$/,
    use: {
      loader: 'dts-loader'
    }
}

编辑：尝试忽略 d.ts 文件，将其更改为此

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/app.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: 'ts-loader'
        },
        exclude: /node_modules/,
      }
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.d.ts'],
  },
  plugins: [
    new webpack.IgnorePlugin(/\.d\.ts$/),
  ],
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist'),
  },
};