JavaScript 导入是如何在幕后工作的？

Question

该import语句在 JavaScript 中实际上是如何工作的？我阅读了文档，它说它将导出的代码放在文件范围内。这是否意味着代码被复制到我输入 import 的文件中？

例如 - 在 library.js 我有：

export {export function getUsefulContents(url, callback) {
    getJSON(url, data => callback(JSON.parse(data)));
}

在 main.js 我有：

import { getUsefulContents} from 'library.js';

getUsefulContents('http://www.example.com',
    data => { doSomethingUseful(data); });

这允许我在 main.js 中调用 getUsefulContents()。我的问题是，main.js 现在有我从 library.js 导出的内容吗？

使用import与getUsefulContents()在 main.js中物理定义相同吗？

function getUsefulContents(url, callback) {
    getJSON(url, data => callback(JSON.parse(data)));
}

getUsefulContents('http://www.example.com',
    data => { doSomethingUseful(data); }); 

我问的主要原因是因为我想知道使用 import 是否会对 main.js 文件大小产生影响？或者引擎盖下正在发生其他事情？

谢谢！

Answer 1

取决于你如何使用main.js。如果您通过捆绑器运行它，则捆绑器可能会将其包含library.js到main.js一个文件中。在这种情况下，唯一的优势是可维护性和易于开发，因为您专注于正在处理的文件。如果您只是运行该import语句并部署应用程序，则该import语句不会影响main.js.