问候，Devs和Bundlejs狂热者！ ð
我在bundlejs上结束了一些长期存在的问题，当问题#50使我想起了关于捆绑包应该如何处理ESM和CJS软件包的持续辩论。
。。灯泡闪烁，咖啡被消耗掉（我不喝咖啡，但你明白了），我敢肯定我已经破解了解决方案。但是您需要注意一些轻微的行为改变。所以搭扣。如果有任何东西看不见或令人困惑，请在下面的评论，GitHub Discussions上或直接发行#50。
。手中的问题ð§
问题的根源在于bundlejs如何处理commonjs文件。
“ commonjs文件仅导出其默认值，这创建了一个难题。如果我们不获取它，我们该如何判断模块是否为commonj？如果我们先获取它，那么Esbuild的交易为时已晚正确地。”
，但永远不要害怕！我已经制定了一个对于模块是ESM还是CONCORJS的公正的解决方案。
解决方案ð§©
让我们逐步逐步漫步，使用我们方便的deno.bundlejs.com API进行演示。
-
单个CJS文件：仅导出默认值（无需重命名）。使用
postcss-easings：https://deno.bundlejs.com/?file&q=postcss-easings&minify=false查看此示例
// ...
// virtual-filesystem:/index.ts
var index_exports = {};
__export(index_exports, {
default: () => import_postcss_easings.default
});
__reExport(index_exports, __toESM(require_postcss_easings_4_0()));
var import_postcss_easings = __toESM(require_postcss_easings_4_0());
var export_default = import_postcss_easings.default;
export {
export_default as default
};
-
多个CJS文件：导出默认值，但使用文件URL作为导入名称。另外，将
...Default附加到末端，例如：reactDefault＆reactDomDefault。在这里窥视：https://deno.bundlejs.com/?file&q=react,react-dom&minify=false
// ...
// virtual-filesystem:/index.ts
var index_exports = {};
__export(index_exports, {
reactDefault: () => import_react.default,
reactDomDefault: () => import_react_dom.default
});
__reExport(index_exports, __toESM(require_react_18_2()));
var import_react = __toESM(require_react_18_2());
__reExport(index_exports, __toESM(require_react_dom_18_2()));
var import_react_dom = __toESM(require_react_dom_18_2());
var export_reactDefault = import_react.default;
var export_reactDomDefault = import_react_dom.default;
export {
export_reactDefault as reactDefault,
export_reactDomDefault as reactDomDefault
};
- 单个ESM文件：导出所有内容，包括默认值。伙计们，这里没有重命名！ https://deno.bundlejs.com/?file&q=spring-easing&minify=false
// ...
export {
BatchSpringEasing,
CSSSpringEasing,
EaseInOut,
EaseOut,
EaseOutIn,
EasingDurationCache,
EasingFunctionKeys,
EasingFunctions,
EasingOptions,
FramePtsCache,
GenerateSpringFrames,
INFINITE_LOOP_LIMIT,
SpringEasing,
SpringFrame,
SpringInFrame,
SpringInOutFrame,
SpringOutFrame,
SpringOutInFrame,
batchInterpolateComplex,
batchInterpolateNumber,
batchInterpolateSequence,
batchInterpolateString,
batchInterpolateUsingIndex,
SpringEasing as default, // <- The default export
getLinearSyntax,
getOptimizedPoints,
getSpringDuration,
getUnit,
interpolateComplex,
interpolateNumber,
interpolateSequence,
interpolateString,
interpolateUsingIndex,
isNumberLike,
limit,
parseEasingParameters,
ramerDouglasPeucker,
registerEasingFunction,
registerEasingFunctions,
scale,
squaredSegmentDistance,
toAnimationFrames,
toFixed
};
-
多个ESM文件：从所有导出中导出所有方法和变量，但请记住将所有默认导出的命名规则使用。例如，在导出其他模块导出后，将默认导出重命名为
springEasingDefault和codepointIteratorDefault：https://deno.bundlejs.com/?file&q=spring-easing,codepoint-iterator&minify=false10
// ...
var mod_default = asCodePointsIterator;
export {
BITS_FOR_2B,
BITS_FOR_3B,
BITS_FOR_4B,
BatchSpringEasing,
CSSSpringEasing,
EaseInOut,
EaseOut,
EaseOutIn,
EasingDurationCache,
EasingFunctionKeys,
EasingFunctions,
EasingOptions,
FramePtsCache,
GenerateSpringFrames,
INFINITE_LOOP_LIMIT,
LEAD_FOR_1B,
LEAD_FOR_2B,
LEAD_FOR_3B,
LEAD_FOR_4B,
LEAD_FOR_5B,
MASK_FOR_1B,
MASK_FOR_2B,
MASK_FOR_3B,
MASK_FOR_4B,
SpringEasing,
SpringFrame,
SpringInFrame,
SpringInOutFrame,
SpringOutFrame,
SpringOutInFrame,
UTF8_MAX_BYTE_LENGTH,
asCodePointsArray,
asCodePointsCallback,
asCodePointsIterator,
batchInterpolateComplex,
batchInterpolateNumber,
batchInterpolateSequence,
batchInterpolateString,
batchInterpolateUsingIndex,
bytesToCodePoint,
bytesToCodePointFromBuffer,
codePointAt,
mod_default as codepointIteratorDefault, // <- codepoint-iterator's default export
getByteLength,
getIterableStream,
getLinearSyntax,
getOptimizedPoints,
getSpringDuration,
getUnit,
interpolateComplex,
interpolateNumber,
interpolateSequence,
interpolateString,
interpolateUsingIndex,
isNumberLike,
limit,
parseEasingParameters,
ramerDouglasPeucker,
registerEasingFunction,
registerEasingFunctions,
scale,
SpringEasing as springEasingDefault, // <- spring-easing's default export
squaredSegmentDistance,
toAnimationFrames,
toFixed
};
- Treeshaking：在这里，我们假设如果将Treeshake查询参数添加到URL中，则需要驾驶员座椅。因此，以上所有规则都是无效的，现在您可以完全控制出口的内容，包括默认导出不是自动的。 https://deno.bundlejs.com/?file&q=spring-easing,react&treeshake=[*],[*]&minify=false
// ...
export {
BatchSpringEasing,
CSSSpringEasing,
EaseInOut,
EaseOut,
EaseOutIn,
EasingDurationCache,
EasingFunctionKeys,
EasingFunctions,
EasingOptions,
FramePtsCache,
GenerateSpringFrames,
INFINITE_LOOP_LIMIT,
SpringEasing,
SpringFrame,
SpringInFrame,
SpringInOutFrame,
SpringOutFrame,
SpringOutInFrame,
batchInterpolateComplex,
batchInterpolateNumber,
batchInterpolateSequence,
batchInterpolateString,
batchInterpolateUsingIndex,
getLinearSyntax,
getOptimizedPoints,
getSpringDuration,
getUnit,
interpolateComplex,
interpolateNumber,
interpolateSequence,
interpolateString,
interpolateUsingIndex,
isNumberLike,
limit,
parseEasingParameters,
ramerDouglasPeucker,
registerEasingFunction,
registerEasingFunctions,
scale,
squaredSegmentDistance,
toAnimationFrames,
toFixed
};
// ^ React isn't exported at all
ð - 注意：如果您不正确导出默认值，您可能会遇到CJS模块的问题。一部分是因为摇摇欲坠的是CJS软件包的一部分，所以在这里轻松踩踏！
那里有！对bundlejs.com处理CJS和ESM软件包的方式的最新更新的快速而肮脏的摘要。
所以，继续前进，然后将新系统旋转。让我知道你的想法。乘车ð
Marcin Jozwiak摄影：https://www.pexels.com/photo/abstract-red-and-white-waves-background-subtle-gradients-flow-liquid-lines-design-element-13835514/