Conditional Exportsに対応しているパッケージをWebpackでbundleする際に、Webpackはtargetに合わせてconditionを選択します。
ただ、諸事情で特定のパッケージのみWebpackが自動で解決してくれるconditionとは別のconditionのコードに解決したい場合があります。
例）
Webpackのtargetがwebになっているが、condition browserのコードに解決したくない。
代わりにmodule.defaultで解決したい。
とあるパッケージのpackage.json
{
"name": "@ohakutsu/foobar",
"exports": {
".": {
"module": {
"browser": "./dist/foobar.browser.esm.js", // `browser`ではなく、
"default": "./dist/foobar.esm.js" // `default`をimportしたい
},
"import": "./dist/foobar.cjs.mjs",
"default": "./dist/foobar.cjs.js"
}
},
// ...
}
解決策（あまり積極的には使っていきたくない）
Webpackのresolve.aliasを駆使することで任意のconditionのコードで解決できるようになります。
別のconditionで解決したいパッケージ名をエイリアス名として、任意のconditionへのパスを渡す形になります。
webpack.config.js
const path = require('path');
const packageName = '@ohakutsu/foobar';
const packageJsonFilePath = path.join(__dirname, 'node_modules', packageName, 'package.json');
module.exports = {
//...
resolve: {
alias: {
[packageName]: require(packageJsonFilePath)['exports']['.']['module']['default'],
},
},
};
上記のようなコードが増えると複雑度が増して意図せぬバグを引き起こす可能性があるので、あまりおすすめはしません。