Webpack+ tsconfig + 动态导入对 .d.ts 文件抛出 NoEmit 错误

Question

我在理解 webpack、tsconfig 和 .d.ts 文件如何协同工作时遇到了一个奇怪的问题。

我的项目结构如下：

ScriptsApp 包含一个@types 文件夹，如下所示：

我的tsconfig.json如下：

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "esnext",
    "lib": [
      "es6",
      "dom",
      "scripthost",
      "es2018",
      "es2018.promise"
    ],
    "jsx": "react",
    "sourceMap": true,
    "outDir": "./.out/",
    "noImplicitAny": true,
    "strictFunctionTypes": true,
    "alwaysStrict": true,
    "moduleResolution": "node",
    "typeRoots": ["node_modules/@types", "ScriptsApp/@types"]
  },
  "include": ["./ScriptsApp/**/*.tsx", "./ScriptsApp/**/*.ts", "ScriptsApp/@types"],
  "exclude": ["node_modules"],
  "files": ["ScriptsApp/indexApp.tsx"]
}

这是我的 webpack 配置：

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

module.exports = {
  mode: "development",
  output: {
    filename: "[name].bundle.[hash].js",
    path: path.join(__dirname, ".out/"),
    chunkFilename: "[name].chunk.js",
    publicPath: "/",
    hotUpdateChunkFilename: ".hot/hot-update.js",
    hotUpdateMainFilename: ".hot/hot-update.json"
  },
  optimization: {
    runtimeChunk: {
      name: "manifest"
    },
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          priority: -20,
          chunks: "all"
        }
      }
    }
  },
  target: "web",
  devServer: {
    contentBase: ".out/",
    hot: true
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      inject: true,
      template: path.join(__dirname, "./index.html")
    }),

    new ForkTsCheckerWebpackPlugin({
      checkSyntacticErrors: true,
      tslint: "./tslint.json",
      tslintAutoFix: true,
      tsconfig: "./tsconfig.json",
      async: false,
      reportFiles: ["ScriptsApp/**/*"]
    })
  ],
  module: {
    rules: [
      {
        test: /\.(png|jpg|ico)$/,
        loader: "file-loader",
        options: {
          name: ".img/[name].[ext]?[hash]",
          publicPath: "/"
        }
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "file-loader",
        options: {
          name: ".fonts/[name].[ext]?[hash]",
          publicPath: "/"
        }
      },
      {
        test: /\.(ts|tsx)$/,
        use:"ts-loader"
      },
      {
        test: /\.js$/,
        loader: "source-map-loader"
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader" // creates style nodes from JS strings
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "resolve-url-loader"
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [".js", ".ts", ".tsx", ".scss", ".css", ".png", ".ico", ".json"]
  },
  devtool: "source-map"
};

现在我的问题是： 我正在尝试在我的 React 组件之一中使用动态导入，如下所示：

private loadComponentFromPath(path: string) {
    import(`../../ScriptsApp/${path}`).then(component =>
      this.setState({
        component: component.default
      })
    );
}

我一添加动态导入，我的构建就开始为 ScriptsApp/@types 文件夹中的所有 .d.ts 文件显示此错误

WARNING in ./ScriptsApp/@types/react-adal.d.ts
Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for C:\code\AzureCXP-Eng\src\Applications\AzureCxpWebSite\WebSite\FeedbackSrc\App\ScriptsApp\@types\react-adal.d.ts.
    at makeSourceMapAndFinish (C:\code\AzureCXP-Eng\src\Applications\AzureCxpWebSite\WebSite\FeedbackSrc\App\node_modules\ts-loader\dist\index.js:78:15)
    at successLoader (C:\code\AzureCXP-Eng\src\Applications\AzureCxpWebSite\WebSite\FeedbackSrc\App\node_modules\ts-loader\dist\index.js:68:9)
    at Object.loader (C:\code\AzureCXP-Eng\src\Applications\AzureCxpWebSite\WebSite\FeedbackSrc\App\node_modules\ts-loader\dist\index.js:22:12)
 @ ./ScriptsApp lazy ^\.\/.*$ namespace object ./@types/react-adal.d.ts
 @ ./ScriptsApp/Routes/AppRoutesList.tsx
 @ ./ScriptsApp/Routes/Routes.tsx
 @ ./ScriptsApp/Components/App.tsx
 @ ./ScriptsApp/indexApp.tsx
 @ ./ScriptsApp/index.tsx
 @ multi webpack-hot-middleware/client?reload=true ./ScriptsApp/index.tsx

目前我如何才能使错误消失？

1. 将 @types 文件夹移到 ScriptsApp 之外，或者
2. 不使用动态导入
3. 将 ScriptsApp/@types 下的所有 .d.ts 文件重命名为 .interface.ts --> 最让我困惑

我无法理解为什么。我也是整个技术堆栈的新手，如果我遗漏了一些明显的东西，我很抱歉。请解释这种行为。此外，任何关于改进配置的建议也非常感谢。谢谢。

Answer 1

从另一个 GitHub 问题中，您可以在 tsconfig.json 文件中执行此操作。

{ "compilerOptions": { "target": "ES6", "jsx": "react", "noEmit": true }, "exclude": [ "node_modules", "dev_server.js" ] }

您可以尝试添加行"noEmit": false.

Answer 2

tsconfig.json 中的以下代码应确保不会报告来自node_modules 内部的错误。

{
  compilerOptions: {
     skipLibCheck: true
  }
}