[es6]require 与 import 的介绍

今天给大家分享下，模块引入的两种方法，require 与 import
( 有所收获的话，还请大家给个赞 ^_^)


大家都知道，在nodejs 中，引入模块用 require ; 而在react 与vue 等前端框架中，用的是import ;
那为啥不一样呢?


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

nodejs 中，默认的模块规范为commonjs .
commonjs 中的暴露接口的语法是用module.export ; 引入模块的方法是使用 require;


react 与 vue等很多的前端框架，使用的都是ECＭＡ自带的模块规范（ES6）
（注：之前ECＭＡ没有模块化，但也可以使用，如：requie.js 等第三方模块化插件来实现模块化开发）；

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





在 nodejs 中不进行任何设置的情况下，js文件默认使用的是commonjs规范 。
但是，也可以指定使用ECMA模块化规范，修改方法：



在package.json 中配置type选项：
type:"module";  即表示使用ECMA的模块化规范

图片：bug.png

首先，要了解两个后缀名。
.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；



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() 加载的不同

图片：require.png