7
votes

Avoir des problèmes avec la résolution du module Webpack

J'ai un module global npm installé, appelons-le abc-cli . Maintenant, j'ai une application qui fonctionne avec cette commande: abc-cli run .

En gros, abc-cli récupère les composants de app , les compile et l'exécute avec sa source.

Maintenant, je veux publier cette application en tant que module npm distinct. J'utilise donc le Webpack pour générer le bundle. Lors de la résolution des modules, webpack est incapable de résoudre les modules qui font partie de abc-cli . C'est évident, webpack n'a aucune idée de ce qu'est abc-cli .

Ma question est donc de savoir comment puis-je m'assurer que webpack résout les dépendances des modules? Y a-t-il un moyen pour que le webpack exécute / compile le abc-cli pendant le regroupement.

Ou le pire des cas pourrait être de supprimer l'avertissement de résolution de module ou d'ignorer ces modules . Parce que je sais que cela va être présent.

Exemple:

Dans mon application , j'ai une instruction d'importation comme

{
        test: require.resolve("@abc/components"),
        use: 'null-loader'
}

Maintenant, pendant le regroupement, le pack Web ne résoudra pas ce module:

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },
  resolve: {
    extensions: ['.mjs', '.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              'es2015',
              'react',
              'stage-2'
            ]
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  externals: {
    'react': 'commonjs react'
  }
};

Ce serait d'une grande aide si je pouvais contourner ce problème. p>

Ma configuration webpack:

Module not found: Error: Can't resolve '@abc/components' in '/home/shishir/app/src/shared/visualizations'

J'ai essayé le null-loader :

import SomeComponent from '@abc/components';

mais cela n'a pas aidé.

javascript reactjs npm webpack

1 commentaires

qu'en est-il d'utiliser external comme vous l'utilisez pour réagir? Si je comprends bien, il sera présent

3 Réponses :

0
votes

Vous devez indiquer à Webpack quel est l'emplacement de ce module. Mon projet a une structure comme celle-ci

Ex: je veux importer un fichier dans le dossier Helper, j'aurai besoin de le faire

XXX

Parce que le code ci-dessous fait cela pour moi

resolve: {
    modules: [
        path.resolve('./React/js/App'),
        path.resolve('./React/js/App/Modules/Client'),
        path.resolve('./React/js/App/Modules/Adnmin'),
        path.resolve('./node_modules')
    ]
},

Vous pouvez voir que je dis à webpack de résoudre le chemin provenant de ./React/js /App.

Le dossier Helper est donc en direct dans le dossier App, Webpack saura où chercher.

Voici mon code source complet pour votre référence ici

Veuillez laisser je sais si c'est la solution pour vous

0 commentaires

3
votes

Si vous effectuez une importation comme celle-ci:

import SomeComponent from '@abc/components';

Vous dites à Webpack d'importer un module nommé @ abc / components depuis sa "racine de résolution". Cette racine de résolution est normalement 'node_modules' . (Imaginez si @ abc / components était un package npm, cela fonctionnerait bien.)

Comme vous avez obtenu cette bibliothèque à partir d'une source différente via votre outil de ligne de commande, vous avoir ces dépendances à un emplacement différent. Webpack ne les reconnaîtra pas comme par magie, mais vous avez quelques options simples:

Faire en sorte que abc-cli copie les fichiers de composants de abc dans les node_modules / @ abc de app .
Créez un lien symbolique dans les node_modules de app appelé @abc qui pointe vers le dossier d'abc. Webpack parcourt les liens symboliques par défaut et cela vous évite le temps de copier les fichiers à chaque fois. Solution IMO légèrement meilleure, surtout si abc change plus d'une fois de temps en temps.
Dites à Webpack de rechercher également des modules dans le dossier de @abc , pas seulement dans node_modules . Vous pouvez le faire en utilisant resolution.modules tout comme NgÃ ´ Hung Phúc l'a montré dans sa réponse. Soyez un peu prudent cependant, comme vous importez des modules comme @ abc / components , vous devez pointer webpack vers le répertoire un niveau au-dessus @abc code >, et bien sûr cela nécessite que le répertoire des composants abc s'appelle @abc .

0 commentaires

6
votes

Voici deux façons d'informer Webpack d'un emplacement supplémentaire pour rechercher un module.

// webpack.config.js

module.exports = {
  //...
  resolve: {
    // 1. add extra `node_modules` directory to search path
    modules: ['node_modules', '/abs_path/to/global/node_modules'],
    // 2. use alias to explicitly map a module name to its exact location
    alias: {
      '@abc': '/abs_path/to/global/node_modules/@abc'
    }
  }
};

Pour votre cas d'utilisation, si vous n'avez que le module @abc assis en dehors du répertoire local traditionnel node_modules , je vous recommande d'utiliser resolve.alias.

Source: https://webpack.js.org/configuration/resolve/#resolvemodules .

1 commentaires

J'ai pu ajouter un alias et cela a fonctionné pour moi! Je vous remercie!