require 与 import 的介绍

（好久不见，朋友们；终于忙完了，现在时间比较充分，文章写起来！！

哈哈，跟着我一起学起来吧 !!）

今天给大家分享下，模块引入的两种方法，require 与 import

01

require 与 import 是什么

大家都知道，在nodejs 中，引入模块用 require ; 而在react 与vue 等前端框架中，用的是import ;

那为啥不一样呢?

原因：它们使用的模块规范不一样；

nodejs 中，默认的模块规范为commonjs .

commonjs 中的暴露接口的语法是用module.export ; 引入模块的方法是使用 require;

react 与 vue等很多的前端框架，使用的都是ECＭＡ自带的模块规范（ES6）

（注：之前ECＭＡ没有模块化，但也可以使用，如：requie.js 等第三方模块化插件来实现模块化开发）；

ECMA中模块化暴露使用export , 引用模块使用import

02

Nodejs 中模块化

在 nodejs 中不进行任何设置的情况下，js文件默认使用的是commonjs规范 。

但是，也可以指定使用ECMA模块化规范，修改方法：

在package.json 中配置type选项：

type:"module"; 即表示使用ECMA的模块化规范

03

不同规范的模块

如何相互调用

首先，要了解两个后缀名。

.mjs 后缀，说明js文件使用的是ECMA中的模块规范;

.cjs后缀说明使用的是commonjs规范;

第一，commonjs中 引入ecma 模块的文件方法

（commonjs模块文件，直接用.js后缀）

1. 将ecma模块文件后缀改为mjs;
2. 代码实现

import {createRequire} from 'module'
let require = createRequire(import.meta.url);
require("./demo2.mjs");

第二，ecma 模块中，导入一个commonjs模块的方法

1. 将commonjs模块文件后缀改为cjs;
2. 代码实现

import {createRequire} from 'module'
let require = createRequire(import.meta.url);
require("./demo2.cjs"); //注意文件的后缀名

注：如果上面不能成功，将导入commonjs的文件，后缀改成cjs；

04

import 相关介绍

import 导入文件时，最先开始导入的；故只能进行静态导入

// import {name} from './demo.js';  静态导入

如下动态的导入方式会报错：

let na = './demo.js';
import {name} from na ; 
// 报错原因：在import 导入时，na还未被解析

那如何实现动态导入呢？

使用import() 方法; import() 是一个返回promise 对象的方法

let na = './demo.js';
await import (na); // 即可以动态导入

注：commonjs 模块中async - await 必须要结合使用：即函数中使用await, 一定要给此函数在async;

而在ECMA 模块封装中, 可以只使用await ，不用加async

下图：import，import(),require() 加载的不同