有沒有辦法在webpack中指定特定依賴的目標解析？

Question

假設我們的依賴項具有以下package.json描述為：

{
  "name": "some-dependency",
  "exports": {
    ".": {
      "browser": {
        "import": "...",
        "require": "..."
      },
      "node": {
        "import": "...",
        "require": "..."
      },
    }
  }
}

如何使 webpack 僅針對some-dependency單獨解析node導出？。 我試過這樣的事情：

module.exports = {

  // ...

  resolve: {

    extensions: [".jsx", ".js"],
    conditionNames: ["node", "some-dependency"],
  },
};

但它適用於全球並且似乎沒有正確完成工作。

Answer 1

conditionNames屬性與優先順序無關。 它是關於使用哪些字段。 優先順序由exports object key 順序決定。

此外，在您的情況下，無法通過任何 Webpack 配置來實現此目的。 您將必須構建自己的插件以使用enhanced-resolver添加自定義解析器邏輯。 例如：

const { readFileSync } = require('fs');
const path = require('path');

// The module for which you need custom resolution
const targetDependency = 'some-dependency';

class MyCustomResolver {
  constructor(source, target) {
    this.source = source;
    this.target = target;
  }

  apply(resolver) {
    const target = resolver.ensureHook(this.target);

    resolver
      .getHook(this.source)
      .tapAsync('MyCustomResolver', (request, resolveContext, callback) => {
        // Any logic you need to create a new `request` can go here
        let newRequest = { ...request };

        if (request.request === targetDependency) {
          // Modify your newRequest object here.
          // Step 1: Read package.json of `some-dependency`.
          const json = JSON.parse(readFileSync(`node_module/${targetDependency}/package.json`));

          // Step 2: Extract required object
          const node = json.exports['.'].node;

          // Step 3: Modify newRequest object (Example only)
          newRequest.request = path.join(__dirname, 'node_modules', node.require);

          // Step 4. Modify additional param of request object if any
        }

        // Call the resolution function.
        resolver.doResolve(target, newRequest, null, resolveContext, callback);
      });
  }
}

module.exports = {
  resolve: {
    plugins: [
      MyCustomResolver
    ]
  }
};