TypeScript/Electron/Webpack模块为什么要使用绝对路径？

Question

我正在使用react-dates在一个electron项目中，需要通过以下方式进行初始化:

 import 'react-dates/initialize';

这段代码内部设置了一些变量，以备后续使用。问题在于，当我进入下一个使用这些变量的代码块时，我会遇到异常，因为这些变量仍然为空。

事实证明，Chrome/Electron将它们视为两个不同的文件，尽管它们在磁盘上是相同的文件。当在设置文件中断点时，Chrome报告以下路径（第一次访问/第二次访问）

C:\src\Project\node_modules\react-with-styles\lib\ThemedStyleSheet.js
webpack:///./node_modules/react-with-styles/lib/ThemedStyleSheet.js

好的，这很奇怪——是怎么回事呢？这可能与我的webpack设置有关，我使用了TsConfigPathsPlugin和output/paths。从我的webpack来看：

/**
 * Base webpack config used across other specific configs
 */

import path from 'path';
import webpack from 'webpack';
import { dependencies } from '../package.json';

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

export default {
  externals: [...Object.keys(dependencies || {})],

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true
            }
          },
          'ts-loader'
        ]
      },
      {
        test: /\.js$/, // Transform all .js files required somewhere with Babel
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true
          }
        }
      }
    ]
  },

  output: {
    path: path.join(__dirname, '..', 'app'),
    // https://github.com/webpack/webpack/issues/1114
    libraryTarget: 'commonjs2'
  },

  /**
   * Determine the array of extensions that should be used to resolve modules.
   */
  resolve: {
    extensions: ['.js', '.ts', '.tsx', '.json'],
    plugins: [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })]
  },

  plugins: [
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'production'
    }),

    new webpack.NamedModulesPlugin()
  ]
};

我的tsconfig使用baseUrl来重新映射路径。

{
  "compilerOptions": {
    "target": "es5",
    "baseUrl": "./app/",
    "jsx": "react",
    "module": "es2015",
    "moduleResolution": "node",
    "noUnusedLocals": true,
    "pretty": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "lib": ["dom", "es5", "es6", "es7", "es2017"],

    "allowSyntheticDefaultImports": true // no errors with commonjs modules interop
    //"strict": true,
    //"strictFunctionTypes": false,
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

有关在哪里/如何找出更多信息的任何建议都将不胜感激！

-- 编辑：

我认为磁盘上没有两个物理副本，npm -ls react-dates 的输出如下：

C:\<project>\manager-ts>npm ls react-dates                                                                 
erb-typescript-example@0.17.1 C:\<project>\manager-ts                                                      
`-- react-dates@20.1.0                                                                                                                                                                                                                                                                                                                                                  
C:\<project>\manager-ts> 

- FrozenKiwi

---

路径没问题，你正在比较平台绝对路径（Windows）和通用的Webpack URI。问题可能在其他地方，但你需要分享更多的代码。阅读“react-dates”文档，你只需要做两件事就可以将其引导到你的应用程序中，所以问题可能在实现上！ - vortex

我知道路径是相同的 - 问题在于它们被评估为两个不同的路径。这意味着文件会被评估两次，并最终成为两个不同（无关）的模块。 - FrozenKiwi

输出发布：看起来只有一份副本。 - FrozenKiwi

@FrozenKiwi 如果可以的话，请分享一个可复现您问题的代码库。 - artur grzesiak

我尝试创建一个简单的存储库来演示问题，但是在我的巨型电子应用程序之外无法重现它。 - FrozenKiwi

Answer 1

这不是一个解决方案，对于其他人的搜索可能没有太大帮助，但它确实让我解除了阻塞。

我创建了第二个 TypeScript 模块，使用 react-dates 定义组件。该模块被编译为 es5，然后通过 "yarn link" 链接到我的主应用程序中。虽然我从未弄清楚为什么存在差异（我仍然从 ethers.js 中获得重复初始化警告），但至少解决了这个问题。

- FrozenKiwi