Question

我安装了一个全局npm模块，我们称之为abc-cli。现在，我有一个反应app与此命令一起运行：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'
}

但没有帮助。

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

对于您的用例，如果只有@abc模块位于常规本地node_modules目录之外，则建议您使用resolve.alias。

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

Answer 2

如果您要进行这样的导入：

import SomeComponent from '@abc/components';

您正在告诉Webpack从其“解析根目录”导入名为@abc/components的模块。此解析根目录通常是'node_modules'。（想象一下，如果@abc/components是一个npm软件包，那就可以了。）

当您通过命令行工具从其他来源获得此库时，这些依赖项将位于其他位置。 Webpack不会神奇地识别这些，但是您有一些简单的选择：

使abc-cli复制abc的组成文件到app的{{1}}。
在node_modules/@abc的{{1}}中创建一个名为app的符号链接，该链接指向abc的文件夹。 Webpack traverses symlinks by default，这样可以节省您每次复制文件的时间。 IMO的解决方案略好，尤其是如果node_modules偶尔更改多次。
告诉Webpack也在@abc的文件夹中搜索模块，而不仅仅是abc。您可以使用resolve.modules来完成此操作，就像NgôHùngPhúc在他的答案中显示的那样。不过请小心一点，在导入@abc之类的模块时，您必须将webpack指向目录上一级 node_modules，当然，这需要abc的组件目录被称为@abc/components。

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文件夹位于应用程序文件夹Webpack中，它将知道在哪里寻找。

以下是我为您的参考文献here

编写的完整源代码

请告诉我这是否适合您

遇到webpack模块解析问题

3 个答案: