javascript - 遇到 webpack 模块解析问题

Question

我安装了一个全局 npm 模块，我们称它为 abc-cli。现在我有一个使用此命令运行的 React 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 .