如何使用动态 Parcel 2 别名？

Question

Parcel 2 支持简单用例的 glob 别名，但我不知道如何将它用于需要某些转换的全局对象属性。

例如，在 WordPress 项目中，

wp

是一个全局对象，附加了许多方法，如

wp.blocks

和

wp.blockEditor

。我可以使用别名来解决这些问题，就像在

package.json

:

中那样

{
    "name": "wp-parcel",
    "version": "1.0.0",
    "description": "Parcel build tool for WordPress",
    "scripts": "...",
    "alias": {
        "@wordpress/blocks": {
            "global": "wp.blocks"
        },
        "@wordpress/block-editor": {
            "global": "wp.blockEditor"
        }
    },
    "devDependencies": {
        "parcel": "^2.9.3"
    }
}

这很好用，但是还有很多更多的方法（稍后可能会添加更多），这将导致我的

package.json

中出现一个庞大且不断增长的列表。

相反，我希望有一种方法可以通过将所有

@wordpress

包的 kebab 大小写转换为驼峰大小写来动态解析别名，例如：

{
    "name": "wp-parcel",
    "version": "1.0.0",
    "description": "Parcel build tool for WordPress",
    "scripts": "...",
    "alias": {
        "@wordpress/*": {
            "global": "wp[$1.toLowerCase().replace(/(-\w)/g, m => m.toUpperCase().substr(1))]"
        }
    },
    "devDependencies": {
        "parcel": "^2.9.3"
    }
}

Parcel 2 有什么方法可以实现这一点吗？

Answer 1

在 Parcel 的 GitHub 上反复讨论后，这里有一个解决方案。本质上，我需要创建一个自定义解析器：

在

.parcelrc

文件中：

{
  "extends": [
    "@parcel/config-default"
  ],
  "resolvers": [
    ".parcel-resolvers.mjs",
    "..."
  ]
}

在

.parcel-resolvers.mjs

文件（或您选择的任何名称）中：

import {Resolver} from '@parcel/plugin';
import path from 'path';

export default new Resolver({
  async resolve({ options, specifier }) {
    if (specifier.startsWith('@wordpress') && ! ['@wordpress/icons'].includes(specifier)) {
      const propertyName = specifier
        .substring(11)
        .toLowerCase()
        .replace(/(-\w)/g, (m) => m.toUpperCase().substring(1));
      return {
        filePath: path.join(
          options.projectRoot,
          `wp-${propertyName}.js`
        ),
        code: `module.exports = wp['${propertyName}'];`,
      };
    }
    return null;
  },
});