详解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 相关文章推荐
JQuery 入门实例1
Jun 25 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
详解Vue3中对VDOM的改进
Apr 23 Javascript
浅谈JS的原型和原型链
Jun 04 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
第八节--访问方式
2006/11/16 PHP
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
Extjs学习笔记之七 布局
2010/01/08 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
js实现楼层导航功能
2017/02/23 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
Python标准库itertools的使用方法
2020/01/17 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
python把一个字符串切开的实例方法
2020/09/27 Python
免税水晶:Duty Free Crystal
2019/05/13 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
经典的班主任推荐信
2013/10/28 职场文书
广告语设计及教案
2014/03/21 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
盗窃案辩护词
2015/05/21 职场文书