命名导入和默认导入之间的webpack差异

Question

所以，在我的webpack src中，我试着

import {Papa} from "papaparse"
export {Papa}

和

import Papa from "papaparse"
export {Papa}

注意第二个，导入不使用大括号。当我这样调用时，不带大括号的（默认导入？）可以工作：

import {Papa} from "papaparse-webpack-generated.js"

Papa.parse(...)

这是我用npm下载的papaparse.js:

(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;

    //a bunch of functions and variables here
    
    return Papa;
}));

我只是好奇这两者有什么区别？为什么我用花括号的话webpack生成的js会失败？如果我使用命名导入(花括号)使用webpack生成，那么< code>Papa.parse会给出< code>Papa is undefined

编辑:从上面的< code>papaparse.js片段中我们可以看到，对于变量< code>Papa，没有< code>export语句。我错过了什么吗？那么，我们如何判断它是命名导出还是默认导出呢？

谢谢你。

Answer 1

这一切都归结于< code>papaparse公开/导出其模块的方式。< br >如果它正在:

const Papa = ...;
export default Papa;

您需要以这种方式导入它（导入默认导出的成员不需要大括号）：

import Papa from "papaparse"
// or you can call it whatever you want
import Mama from "papaparse"

但是，如果它是命名导出，例如：

const Papa = ...;
const Mama = ...;
export { Papa, Mama };

您需要使用其名称导入它：

import { Papa } from "papaparse";
// or call it something else within your module from now on:
import { Papa as Mama } from "papaparse";

Answer 2

在您从中导入的文件中，您会注意到 Papa 被导出为“导出默认值”。模块可以具有单个默认导出和任意数量的命名导出。

默认导出是使用不带大括号的语法导入的，并且在导入的文件中可以有任何名称（因为歧义不是通过名称来解决的，而是通过模块只能有默认导出这一事实来解决的）。

另一方面，命名导出必须由它们的特定名称引用，并且必须放在花括号内，以表示它们是命名导出。您可以使用以下语法导入多个命名导出:

import {NamedA, NamedB} from x

甚至同时导入两者：

import DefaultExport, {NamedA, NamedB} from x

在这里进一步阅读： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import