Question

我正在使用Babel和CommonJS插件进行汇总，如下所示：

    const inputOptions = {
        input: "...",
        plugins: [
            resolve(),
            babel({
                exclude: "node_modules/**",
                externalHelpers: true,
                include: "**/components/**/*.js",
            }),
            commonjs(),
        ],
    };

但是发生的是，从组件引用的模块似乎未被CommonJS插件识别，它们最终以纯require(...)语句的形式出现在输出中（就像源输入一样），当然它们不能得到解决。由components目录外部的模块（也通过require()语句导入的模块）会被正确拾取并包含在捆绑软件中。

我尝试将babel插件上移（在resolve插件之前），但这没有效果。我还尝试过将其向下移动，但是随后组件中的JSX上的Rollup阻塞了。

我还尝试了删除include选项，以便所有文件都通过Babel，然后结果是除了入口点之外没有其他模块被拾取，因此看来Babel和CommonJS插件确实不是'尽管我很难想象我是唯一拥有这样设置的人。我想念什么吗？

更新：我注意到的另一件事是，不能识别require（）的文件，也没有正确导出。相反，对于每个失败的组件，我都会在输出包中看到它：

module.exports = ComponentName;

var componentName = /*#__PURE__*/Object.freeze({

});

module.exports行来自源代码，但是Object.freeze()语句是汇总添加的内容，也许是因为它没有看到任何默认导出内容？

还要增加一些额外的困惑：实际上，有一个组件由Babel进行了编译，并且模块解析可以正常工作，并且require（）像您期望的那样被替换，但是该组件中包括的所有组件依次具有上述不良行为。

更新2 ：我也能够在一个最小的示例中重现该问题，它使我能够确定为什么事情适用于一个组件，但不能确定它包含在哪个组件中转。显然，功能性React组件可以正常工作，但是类组件会触发问题。因此，现在我的假设是ES6类的Babel转换在某种程度上混淆了CommonJS插件。

更新3 ：由于我认为这是一个错误，因此我也为以下相关项目创建了问题：https://github.com/rollup/rollup-plugin-babel/issues/297和https://github.com/rollup/rollup-plugin-commonjs/issues/369

将汇总与babel和commonjs插件结合使用并不能解决所有模块

0 个答案: