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

h5qlskok 于 2023-02-11 发布在 Java

关注(0)|答案(2)|浏览(114)

所以，在我的webpack源代码中，我尝试了

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

以及

import Papa from "papaparse"
export {Papa}

注意第二个命令，import没有使用花括号，没有花括号的命令（默认import？）在我这样调用时工作：

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会失败？如果我使用命名的import（大括号）使用webpack生成，Papa.parse会给予我Papa is undefined
编辑：我们可以从上面的papaparse.js片段中看到，变量Papa没有export语句。我错过了什么吗？那么，我们如何判断它是命名的还是默认的导出？
谢谢

JavaScript

来源：https://stackoverflow.com/questions/75401910/webpack-difference-between-named-and-default-import

2条答案

按热度按时间

sxpgvts31#

在你导入的文件中，你会注意到Papa被导出为“默认导出”，一个模块可以有一个默认导出和任意数量的命名导出。
默认导出是使用不带花括号的语法导入的，并且可以在导入的文件中使用任何名称（因为歧义不是通过名称解决的，而是通过模块只能使用on default export这一事实解决的）。
另一方面，命名导出必须由其特定名称引用，并且必须放在大括号内，以表示它们是命名导出。您可以使用以下语法导入多个命名导出：

import {NamedA, NamedB} from x

Or even import both：

import DefaultExport, {NamedA, NamedB} from x

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

赞(0）回复(0）举报 2023-02-11

mm9b1k5b2#

这一切都归结为papaparse公开/导出其模块的方式。
如果正在执行：

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

赞(0）回复(0）举报 2023-02-11

我来回答

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

2条答案

相关问题

热门标签

最新问答