JavaScript 中为什么有时用 require 有时用 import？

Question

问题描述

在 JavaScript 里引用依赖库或者文件的时候，有的项目使用 require 有的项目使用 import，它们的区别是什么？

问题出现的环境背景及自己尝试过哪些方法

比如有的项目里这样：

import {Socket} from "phoenix"

有的项目里却是这样：

const {
    normalizeReplacer
} = require('./utils');

而且这样种写法好像不能互相替代。

相关代码

如上。

你期待的结果是什么？实际看到的错误信息又是什么？

哪位大神来解释一下个中原由。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 1

require 是 CommonJS 的方法；import 是 ES Module 的方法。两种方法在细节方面有所不同，最常见的几个：

1. import 只能静态加载，动态加载要 import()
2. import 有 default
3. import 可以远程加载

不过仓库里的 require 和 import 未必如此，因为很多包发布的时候都会经过打包工具，常用的 webpack、rollup、vite 等都会对模块进行转译等处理，所以它不一定完全遵守某个规范。

Answer 2

简单的说require是老式写法，import是新式写法
建议全部用新的，毕竟新的语法提示友好，再加上可以静态编译
旧的包可以用 import * as ALLContent from '<package>'来解决

Answer 3

最主要的区别就是规范不同，楼上已经指出；
其次就是使用环境不同：

• require 主要用于 Node.js 环境中
• import 主要用于浏览器端或者支持 ES6 的环境中
• require 输出的是一个值的拷贝，即引入模块后修改该模块不会影响到输出值；import 输出的是一个值的引用，即引入模块后修改该模块会影响到输出值

补充回答楼上，希望对你有所帮助~

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 4

import 是 JavaScript 标准的 Module 引入语法，而 require 是 CommonJS 提供的语法，它被内置于 Node.js 中。

有时在编写 Web 系统时看到框架官方提供的代码模板中发现有些文件用 require 有些用 import 语法，为什么不直接统一使用 import 的官方写法呢？实际上这里是有历史遗留跟使用场景的问题。

import 是属于 ES6+ 的语法，在编写业务代码时一般已经通过 webpack、vite 之类的工具进行编译，被转为浏览器能直接使用的 js 代码。而 Node.js 中旧的版本并不能直接使用 import 语法，因此还需要第三方库进行转换。

建议阅读阮一峰的 《ECMAScript 6 入门》 里面详细讲解的 import 相关的历史与使用。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。