详解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 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
js创建数组的简单方法
Jul 27 Javascript
JS验证不重复验证码
Feb 10 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 Javascript
原生js实现下拉框选择组件
Jan 20 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数据库(3)
2006/10/09 PHP
php笔记之常用文件操作
2010/10/12 PHP
YII路径的用法总结
2014/07/09 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
xmlHTTP实例
2006/10/24 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
python实现爬取图书封面
2018/07/05 Python
Python3简单实现串口通信的方法
2019/06/12 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
学习新党章思想汇报
2014/01/09 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
干部个人考察材料
2014/12/24 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
电频谱管理的原则是什么
2022/02/18 无线电