Как / почему модули Typescript / Electron / Webpack имеют абсолютные пути? - PullRequest
Новая
       8

Как / почему модули Typescript / Electron / Webpack имеют абсолютные пути?

5 голосов
/ 31 марта 2019

Я использую даты реакции в электронном проекте, который требует инициализации через: 

 import 'react-dates/initialize';

Это внутренне устанавливает некоторые переменные, которые будут использоваться позже. Проблема в том, что когда я в следующий раз ввожу код, в котором используются эти переменные, я получаю исключение, потому что они по-прежнему равны нулю.

Оказывается, Chrome / Electron рассматривает их как 2 отдельных файла, даже если они являются одним и тем же файлом на диске. При разрыве файла установки Chrome сообщает о следующих путях (первый доступ / второй доступ) 

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

Хорошо: это странно - что дает? Где / как это могло случиться? Я предполагаю, что это как-то связано с моей настройкой веб-пакета - я использую TsConfigPathsPlugin & output / paths, если это имеет значение. Из моего веб-пакета: 

/**
 * 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 реакция-даты выглядит следующим образом 

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>

1 Ответ

0 голосов
/ 22 апреля 2019

Это не исправление, и, возможно, оно не очень полезно для других, кто ищет, но оно разблокировало меня.

Я создал второй модуль машинописного текста, который определяет компонент с использованием даты реакции.Этот модуль скомпилирован в es5, а затем "ссылка на пряжу" - в мое основное приложение.Хотя я так и не понял, почему были различия (и я до сих пор / также получаю двойные предупреждения об инициализации из ethers.js), это решило по крайней мере эту проблему.

...