今天给大家分享下,模块引入的两种方法,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后缀)
import {createRequire} from 'module' let require = createRequire(import.meta.url); require("./demo2.mjs"); 第二,ecma 模块中,导入一个commonjs模块的方法
let require = createRequire(import.meta.url); require("./demo2.cjs"); //注意文件的后缀名 注:如果上面不能成功,将导入commonjs的文件,后缀改成cjs; 04 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 |
|
最新喜欢:幽梦深渊
|