doubleyong
管理员
管理员
  • 最后登录2022-01-18
  • 发帖数1052
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:148回复:0

[es6]require 与 import 的介绍

楼主#
更多 发布于:2021-12-30 11:21
今天给大家分享下,模块引入的两种方法,require 与 import
( 有所收获的话,还请大家给个赞 ^_^)


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


原因:它们使用的模块规范不一样;

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


react 与 vue等很多的前端框架,使用的都是ECMA自带的模块规范(ES6)
(注:之前ECMA没有模块化,但也可以使用,如:requie.js 等第三方模块化插件来实现模块化开发);

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





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



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

图片:bug.png





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

图片:require.png

最新喜欢:

幽梦深渊幽梦深渊
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号