“require(x)”和“import x”的区别

Question

我刚刚开始研究一个将与 MongoDB 交互的小型节点项目。但是，我似乎无法正确导入相关的节点模块，即使我已经通过 npm 正确安装了它们。

例如，下面的代码会抛出一个错误，告诉我“express 没有默认导出”：

 import express from "express";

但是，此代码有效：

 const express = require("express");

所以我的问题是，import 和 variable/require 方法的功能有什么区别？ 我想解决困扰我在项目中的导入的任何问题，因为它似乎可能会在未来引起其他问题。

原文由 austinthemassive 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这个简单的图表将帮助您理解 require 和 import 之间的区别。

除此之外，

您 不能 使用 require 选择性地仅加载您需要的部分，但使用 import ，您可以选择性地仅加载您需要的部分，这样可以节省内存。

加载是 同步 的（逐步） require 另一方面 import 可以是异步的（无需等待先前的导入），因此它 的性能比 require .

原文由 Always Sunny 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

The major difference between require and import , is that require will automatically scan node_modules to find modules, but import ，它来自 ES6，不会。

Most people use babel to compile import and export , which makes import act the same as require .

Node.js 的未来版本可能会支持 import 本身（实际上， 实验版本已经 支持），根据 Node.js 的注释判断， import 将不支持 node_modules ，基于ES6，必须指定模块路径。

所以我建议你不要使用 import 和 babel，但是这个功能还没有确认，它可能会支持 node_modules 在未来，谁知道呢？

---

作为参考，下面是 babel 如何将 ES6 的 import 语法转换为 CommonJS 的 require 语法的示例。

假设文件 app_es6.js 包含这个导入：

 import format from 'date-fns/format';

这是从节点包 date-fns 导入 格式 函数的指令。

相关的 package.json 文件可能包含如下内容：

 "scripts": {
    "start": "node app.js",
    "build-server-file": "babel app_es6.js --out-file app.js",
    "webpack": "webpack"
}

相关的 .babelrc 文件可能是这样的：

 {
    "presets": [
        [
            "env",
            {
                "targets":
                {
                    "node": "current"
                }
            }
        ]
    ]
}

This build-server-file script defined in the package.json file is a directive for babel to parse the app_es6.js file and output the file app.js .

运行 build-server-file 脚本后，如果您打开 app.js 并查找 date-fns 导入，您将看到它已转换为：

 var _format = require("date-fns/format");

var _format2 = _interopRequireDefault(_format);

该文件的大部分内容对大多数人来说都是官样文章，但计算机可以理解。

---

同样作为参考，作为如何创建模块并将其导入项目的示例，如果您安装 date-fns 然后打开 node_modules/date-fns/get_year/index.js 您可以看到它包含：

 var parse = require('../parse/index.js')

function getYear (dirtyDate) {
  var date = parse(dirtyDate)
  var year = date.getFullYear()
  return year
}

module.exports = getYear

使用上面的 babel 过程，你的 app_es6.js 文件可能包含：

 import getYear from 'date-fns/get_year';

// Which year is 2 July 2014?
var result = getYear(new Date(2014, 6, 2))
//=> 2014

babel 会将导入转换为：

 var _get_year = require("date-fns/get_year");

var _get_year2 = _interopRequireDefault(_get_year);

并相应地处理对该函数的所有引用。

原文由 A-yon Lee 发布，翻译遵循 CC BY-SA 4.0 许可协议