JS中关于require与import的区别及说明

定义

在JS中，require和import均是用于导入其他模块的关键字，在使用其他模块中的代码时至关重要。但它们的语法和用法是不同的，而这正是二者之间的主要区别。

require

• require是一种CommonJS规范中定义的关键字。
• 它仅用于Node.js中的模块管理，并不适用于Web浏览器环境下的JavaScript。
• require函数的目的是加载模块，使代码在当前模块中可用。
• require的使用方式如下所示：

const module = require('./module');
// 或者
const { func1, func2 } = require('./module');

• 其中，"./module"为要引入的模块的相对或绝对路径。如果是相对路径，则相对于当前文件所在的目录。
• 如果引用的模块没有指定文件后缀，则require会默认添加".js"、".json"或".node"后缀名进行查找。若都没有找到，则会找到该目录下的index.js、index.json或index.node文件。

import

• import是ES6中定义的一个关键字。
• 用于在Web浏览器和Node.js等环境下以模块化的方式导入其他模块中的代码。
• import的使用方式如下所示：

import Module from './module';
// 或者
import { func1, func2 } from './module';
// 或者
import * as Module from './module';

• 其中，"./module"为要引入的模块的相对或绝对路径。如果是相对路径，则相对于当前文件所在的目录。
• import语句必须在代码的顶部，不能在函数内部或其他代码块中使用。
• import语句读取的是输出接口，它可以是值、函数或组件，也可以是由模块构建的对象、类等。
• 在import语句中，可以使用花括号将需要导入的对象名称括起来。如果需要导入所有的接口，可以使用一个星号代替花括号。

区别

• require是CommonJS规范定义的，在Node.js环境中使用；import是ES6定义的规范，在浏览器和Node.js中都可以使用。
• require是同步加载模块，因此在JS编译时处理，且仅在需要时才会加载；import是异步加载模块，并在运行时处理，因此可以分别按需加载。
• require在使用时不需要使用关键字from；import在使用时需要使用关键字from。
• require可以引用CommonJS、AMD和UMD等模块规范定义的模块；import可以引用ES6模块定义的模块。
• require的接口对象是一个模块的exports对象；import的接口对象是模块输出的某个对象、函数或类等。
• require的接口对象不能重命名；import的接口对象可以使用别名。
• 在Node.js的模块环境中，使用require不存在ES6引入模块的机制，因此不支持ES6的import语法，但可以使用Babel等构建工具帮助实现转换。在Web浏览器中使用ES6的模块化语法时需要依赖构建工具。

示例

示例一：使用require引入Node.js内置的http模块

const http = require('http');
const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
});
server.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

示例二：使用import引入React组件

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return <h1>Hello React!</h1>;
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

在示例二中，我们使用import导入了React和ReactDOM两个库，以及自己编写的App组件。另外，我们使用了JSX语法，需要进行Babel转换才能在浏览器中运行。