Webpack中命名导入与默认导入的区别及Papaparse实践问题

问题背景 #

在Webpack项目中测试了两种Papaparse导入方式：

• 命名导入：import {Papa} from "papaparse"
• 默认导入：import Papa from "papaparse"

两种方式导入后均导出Papa，但发现：

• 默认导入生成的文件，通过import {Papa} from "papaparse-webpack-generated.js"调用Papa.parse(...)时正常
• 命名导入生成的文件会触发Papa is undefined错误

Papaparse核心代码片段：

(function(root, factory)
{
    /* globals define */
    if (typeof define === 'function' && define.amd)
    {
        // AMD. Register as an anonymous module.
        define([], factory);
    }
    else if (typeof module === 'object' && typeof exports !== 'undefined')
    {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory();
    }
    else
    {
        // Browser globals (root is window)
        root.Papa = factory();
    }
    // in strict mode we cannot access arguments.callee, so we need a named reference to
    // stringify the factory method for the blob worker
    // eslint-disable-next-line func-name
}(this, function moduleFactory()
{
    'use strict';
    var Papa = {};

    Papa.parse = CsvToJson;
    Papa.unparse = JsonToCsv;

    // 省略其他函数与变量
    
    return Papa;
}));

问题解答 #

1. 两种导入方式的区别 #

• 默认导入（import Papa from "papaparse"）：对应ES模块的默认导出逻辑，处理CommonJS模块时，Webpack会将module.exports的整个值映射为ES模块的默认导出，直接获取模块对外暴露的整体内容。
• 命名导入（import {Papa} from "papaparse"）：要求模块显式导出名为Papa的属性，即模块的导出对象中必须存在Papa这个键，才能成功导入。

2. 命名导入报错的原因 #

从Papaparse的UMD代码可以看出，在CommonJS环境下，它直接将factory()返回的Papa对象赋值给了module.exports，也就是：

module.exports = Papa; // 这里的Papa是包含parse、unparse等方法的对象

而非：

module.exports = { Papa: Papa }; // 不存在这样的命名导出结构

当你使用命名导入import {Papa} from "papaparse"时，Webpack会尝试从模块的导出对象中读取Papa属性，但此时导出对象本身就是Papa对象，它的属性只有parse、unparse等，根本没有名为Papa的键，因此导入的Papa变量会是undefined，调用Papa.parse()自然报错。

而默认导入是直接获取module.exports的整个值（也就是完整的Papa对象），因此能正常调用其方法。

3. 如何判断模块的导出类型 #

对于没有ES6export语句的UMD/CommonJS模块，可通过以下方式判断：

• 查看CommonJS分支的赋值逻辑：如果是module.exports = 某个值，则这个值就是模块的默认导出，不存在命名导出；如果是module.exports.xxx = xxx，则xxx是命名导出，若同时存在module.exports.default = xxx，则xxx为默认导出。
• 针对Papaparse的代码，module.exports = factory()返回的是Papa对象，因此整个模块的默认导出就是Papa对象，没有单独的命名导出项。
• 另外，其AMD分支注册的是匿名模块，返回的也是Papa对象，对应ES模块的默认导出逻辑。

内容的提问来源于stack exchange，提问作者machupiccu