当你做“;从someModule导入someModuleName”;在Javascript中

What happens when you do "import someModuleName from someModule" in Javascript

本文关键字：Javascript someModuleName someModule 当你 导入      更新时间：2023-09-26

我理解当您想在多个地方重用模块时。您在中执行：module.exports = yourModuleClassName以使该模块可导出。

接下来，当您想在其他地方使用它时，只需导入它，如下所示：import yourModuleClassName from 'yourmodulePath'

我完全理解上述概念，对此我毫不怀疑。今天，我更关心的是，当你导入一个包时会发生什么：

类似于导入redux表单包：

所以我先做：npm install redux-form

接下来我要做的是：import redux-form from redux-form在我的模块中使用它。

现在，当我查看一个npm安装包时。例如当我查看node-modules文件夹下的redux-form文件夹时。这是一个完整的项目，有自己的server.js和package.json，其他npm package installs也是如此。我完全明白它们是一个独立的模块（但更大），它们的工作方式与我的本地独立模块相同。

但我在那里没有发现任何module.exports，那么它们是如何重要的。当然，NODEJS正在发挥一些魔力，使它们在我的所有项目中都很重要。但是，它究竟是如何做到这一点的。假设我在node_modules文件夹中保留了一个模块，但我不认为它是可导入的（我知道没有人会这么做，只是好奇！）。如果NODE负责使其可导入，它如何处理我不希望导入的文件，但我希望它们位于node_modules文件夹中。

此外，这些模块有自己的server.js和webpack.configs。当我对这些包调用import时，它们会被执行吗？如果没有，那么它们到底是如何工作的。

我问这个问题是因为我正在尝试制作一个独立的npm package，我想了解它们是如何工作的。还有一个类似的问题；导入包时会发生什么？但它更倾向于python。有人能为NODEJS解释这个问题吗。如果网上有可用的资源，请指导我，我将不胜感激。

谢谢和问候。

当您导入安装有npm的包时，节点会执行以下步骤：

  1. 它找到第一个node_modules文件夹
    • 包含在要从AND导入包的文件的祖先文件夹中
    • 包含一个名为要导入的包的文件夹
  2. 如果包具有CCD_ 18文件并且该文件具有main字段，
    • 节点加载main字段中的文件集
  3. 否则，节点将加载index.js文件

（来源：https://nodejs.org/api/modules.html#modules_all_together)

此外，这些模块有自己的server.js和webpack.config。当我对这些包调用import时，它们会被执行吗？如果没有，那么它们到底是如何工作的。

webpack.config.js是构建工具Webpack的配置。Webpack仅由redux-form的开发人员在npm上发布包之前执行：当您npm install它时，它已经构建/编译了

在节点包中，server.js只是一个普通文件（与foo.js类似）。只有当它在应用程序根目录中时，它才有特殊的意义：它在运行npm start时执行。

PS您混合了两种使用模块的方式：CommonJS和ES6。它之所以有效，是因为您正在传输您的模块（可能使用Babel或任何其他传输程序），但当节点本机支持ES6模块时，它可能不起作用。

CommonJS和ES6模块有哪些区别

// commonjs
module.exports = yourModuleClassName;
// ES6
export default yourModuleClassName;
// commonjs
exports.something = yourExportedVariable;
// ES6
export { yourExportedVariable as something }
// commonjs
var importedModule = require("module-path");
// ES6
import importedModule from "module-path";
// commonjs
var something = require("module-path").something;
// ES6
import { something } from "module-path";
相关文章：