使用webpack模块解析出现问题

Question

我安装了一个全局npm模块，让我们称其为abc-cli。现在我有一个运行此命令的Reactapp：abc-cli run。

abc-cli基本上是获取app中的组件并使用其源代码进行编译和运行。

现在我想将这个app作为一个独立的npm模块发布。因此，我正在使用Webpack来生成打包文件。当解析模块时，Webpack无法解析作为abc-cli一部分的模块。这很明显，Webpack不知道abc-cli是什么。

所以我的问题是如何确保Webpack解析模块依赖关系？是否有任何方法可以在打包时让Webpack运行/编译abc-cli？

或者最糟糕的情况可能是如何抑制模块解析警告或忽略这些模块。因为我知道它会存在。

例如：

在我的app中，我有一个导入语句：

import SomeComponent from '@abc/components';

现在，在打包时，webpack不会解析该模块：

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

如果我可以解决这个问题，那将是极大的帮助。

我的webpack配置：

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'
  }
};

我尝试过使用 null-loader 工具：

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

但它并没有帮助。

- Shishir Anshuman

---

使用外部，就像你为React使用它一样，这个方案怎么样？如果我理解正确，它会存在。 - Gonzalo.-

Answer 1

这有两种方法可以向webpack指定额外的位置来寻找模块。

// 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'
    }
  }
};

针对您的使用情况，如果您只有位于传统本地node_modules目录之外的@abc模块，我建议您使用resolve.alias。

来源：https://webpack.js.org/configuration/resolve/#resolvemodules。

- hackape

---

我成功添加了别名，它对我起作用了！谢谢！ - Spencer Bigum

Answer 2

如果您执行类似以下方式的导入：

import SomeComponent from '@abc/components';

你正在告诉Webpack从“解析根目录”导入一个名为@abc/components的模块。这个解析根目录通常是'node_modules'。（想象一下，如果@abc/components是一个npm包，那么这将工作得很好。）

由于你通过命令行工具从不同的来源获取了这个库，因此你将在不同的位置拥有这些依赖项。Webpack不会自动识别它们，但你有几个简单的选项：

1. 让 abc-cli 将 abc 的组件文件复制到 app 的 node_modules/@abc 中。
2. 在 app 的 node_modules 中创建一个名为 @abc 的符号链接，该链接指向 abc 的文件夹。Webpack 默认遍历符号链接，这样可以节省每次复制文件的时间。在我看来，这是稍微更好的解决方案，特别是当 abc 经常发生变化时。
3. 告诉 webpack 也在 @abc 的文件夹中搜索模块，而不仅仅是在 node_modules 中。您可以使用 resolve.modules 来做到这一点，就像 Ngô Hùng Phúc 在他的答案中所展示的那样。但要小心，因为如果您像 @abc/components 这样导入模块，您必须将 webpack 指向目录上一级的 @abc，当然这需要 abc 的组件目录被命名为 @abc。

- Marcell Toth

Answer 3

你需要让webpack知道那个模块的位置在哪里。 我的项目结构如下：

例如：我想要导入 Helper 文件夹中的一些文件，我需要这样做

import {isDomExist} from "Helper/Util";

因为下面的代码可以为我完成这个任务

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')
    ]
},

你可以看到，我告诉webpack解析路径来自./React/js/App。

因此，Helper文件夹位于App文件夹中，webpack将知道在哪里查找。

以下是完整的源代码供您参考here 请让我知道这是否对您有帮助。

- user4851087