详解Node.js如何处理ES6模块


Posted in Javascript onMay 15, 2021

一、两种模块的差异

ES6 模块和 CommonJS 模块有很大的差异。

语法上面,CommonJS 模块使用require()加载和module.exports输出,ES6 模块使用import和export。

用法上面,require()是同步加载,后面的代码必须等待这个命令执行完,才会执行。import命令则是异步加载,或者更准确地说,ES6 模块有一个独立的静态解析阶段,依赖关系的分析是在那个阶段完成的,最底层的模块第一个执行。

二、Node.js 的区分

Node.js 要求 ES6 模块采用.mjs后缀文件名。也就是说,只要脚本文件里面使用import或者export命令,那么就必须采用.mjs后缀名。Node.js 遇到.mjs文件,就认为它是 ES6 模块,默认启用严格模式,不必在每个模块文件顶部指定"use strict"。

如果不希望将后缀名改成.mjs,可以在项目的package.json文件中,指定type字段为module。

{
   "type": "module"
}

一旦设置了以后,该目录里面的 JS 脚本,就被解释用 ES6 模块。

# 解释成 ES6 模块

$ node my-app.js

如果这时还要使用 CommonJS 模块,那么需要将 CommonJS 脚本的后缀名都改成.cjs。如果没有type字段,或者type字段为commonjs,则.js脚本会被解释成 CommonJS 模块。

总结为一句话:.mjs文件总是以 ES6 模块加载,.cjs文件总是以 CommonJS 模块加载,.js文件的加载取决于package.json里面type字段的设置。

注意,ES6 模块与 CommonJS 模块尽量不要混用。require命令不能加载.mjs文件,会报错,只有import命令才可以加载.mjs文件。反过来,.mjs文件里面也不能使用require命令,必须使用import。

三、CommonJS 模块加载 ES6 模块

CommonJS 的require()命令不能加载 ES6 模块,会报错,只能使用import()这个方法加载。

(async () => {
  await import('./my-app.mjs');
})();

上面代码可以在 CommonJS 模块中运行。

require()不支持 ES6 模块的一个原因是,它是同步加载,而 ES6 模块内部可以使用顶层await命令,导致无法被同步加载。

四、ES6 模块加载 CommonJS 模块

ES6 模块的import命令可以加载 CommonJS 模块,但是只能整体加载,不能只加载单一的输出项。

// 正确
import packageMain from 'commonjs-package';

// 报错
import { method } from 'commonjs-package';

这是因为 ES6 模块需要支持静态代码分析,而 CommonJS 模块的输出接口是module.exports,是一个对象,无法被静态分析,所以只能整体加载。

加载单一的输出项,可以写成下面这样。

import packageMain from 'commonjs-package';
const { method } = packageMain;

五、同时支持两种格式的模块

一个模块同时要支持 CommonJS 和 ES6 两种格式,也很容易。

如果原始模块是 ES6 格式,那么需要给出一个整体输出接口,比如export default obj,使得 CommonJS 可以用import()进行加载。

如果原始模块是 CommonJS 格式,那么可以加一个包装层。

import cjsModule from '../index.js';
export const foo = cjsModule.foo;

上面代码先整体输入 CommonJS 模块,然后再根据需要输出具名接口。

你可以把这个文件的后缀名改为.mjs,或者将它放在一个子目录,再在这个子目录里面放一个单独的package.json文件,指明{ type: "module" }。

另一种做法是在package.json文件的exports字段,指明两种格式模块各自的加载入口。

"exports":{ 
    "require": "./index.js",
    "import": "./esm/wrapper.js" 
}

上面代码指定require()和import,加载该模块会自动切换到不一样的入口文件。

以上就是详解Node.js如何处理ES6模块的详细内容,更多关于Node.js如何处理 ES6 模块的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
用javascript实现页面打印的三种方法
Mar 05 Javascript
JavaScript 创建对象
Jul 17 Javascript
Javascript 模式实例 观察者模式
Oct 24 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
webpack 代码分离优化快速指北
May 18 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
详解vue中v-for的key唯一性
解读Vue组件注册方式
May 15 #Vue.js
如何理解Vue简单状态管理之store模式
May 15 #Vue.js
Vue如何实现组件间通信
May 15 #Vue.js
详解Vue的sync修饰符
May 15 #Vue.js
深入理解Vue的数据响应式
May 15 #Vue.js
详解Vue的options
May 15 #Vue.js
You might like
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
精通CAD能手自荐书
2014/01/31 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
基于Python的EasyGUI学习实践
2021/05/07 Python
win10搭建配置ftp服务器的方法
2022/08/05 Servers