详解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 相关文章推荐
图片完美缩放
Sep 07 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 05 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调用Oracle存储过程
2006/10/09 PHP
php命令行写shell实例详解
2018/07/19 PHP
JS面向对象编程 for Cookie
2010/09/19 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
require.js中的define函数详解
2017/07/10 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
Python itertools模块详解
2015/05/09 Python
Python 中Pickle库的使用详解
2018/02/24 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
Python Lambda函数使用总结详解
2019/12/11 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
Python中的With语句的使用及原理
2020/07/29 Python
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
比利时香水网上商店:NOTINO
2018/03/28 全球购物
小学毕业演讲稿
2014/04/25 职场文书
企业文明单位申报材料
2014/05/16 职场文书
体育运动会广播稿
2014/10/05 职场文书
个人合作协议范本
2015/08/06 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书