Nodejs中ES Modules如何操作运用?

更新日期: 2020-04-10阅读: 1.8k标签: Modules

2020-05-26 Nodejs v12.17.0 LTS 版发布,去掉 --experimental-modules 标志。

1、虽然已在最新的 LTS v12.17.0 中支持,但是目前仍处于 Stability: 1 - Experimental 实验阶段,如果是在生产环境使用该功能,还应保持谨慎,如果在测试环境可以安装 n install v12.17.0 进行尝试。

2、删除标志也是将 ESM 变为稳定性而迈出的重要一步,根据 Nodejs 官方的发布说明,有望在今年下半年(10 月左右)删除 Nodejs 12 中的警告,届时 Node 14 将会成为 LTS
3、除了node。结合多年开发经验我还整理出2020最新企业级实战视频教程,包括 vue3.0/Js/ES6/TS/react/node等想学的可进裙 519293536 免费获取,小白勿进哦!


ES Modules 基本使用

通过声明 .mjs 后缀的文件或在 package.json 里指定 type 为 module 两种方式使用 ES Modules,下面分别看下两种的使用方式:


使用方式一

构建如下目录结构

├── caculator.js
├── index.js
└── package.json

package.json

重点是将 type 设置为 module 来支持 ES Modules

{
  "name": "esm-project",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  ...
}

caculator.js

export function add (a, b) {
  return a + b;
};

index.js

import { add } from './caculator.js';

console.log(add(4, 2)); // 6

运行

与当前的 v14.3.0 不同的是在 v12.17.0 中使用 ESM 运行时仍然会触发一个 experimental 警告信息。

$ n run v12.17.0 index.js     
(node:6827) ExperimentalWarning: The ESM module loader is experimental.
6


使用方式二

通过指定文件扩展名为 .mjs 与 CommonJS 模块进行区分,这样是不需要在 package.json 中指定 type 为 module。

在上述例子基础上修改文件扩展名即可。

├── caculator.mjs
├── index.mjs

运行

$ n run v12.17.0 index.mjs     
(node:6827) ExperimentalWarning: The ESM module loader is experimental.
6


模块导入导出的几种方式

export 导出

export 用于对外输出模块,可导出常量、函数、文件等,相当于定义了对外的接口,两种导出方式:

  • export: 使用 export 方式导出的,导入时要加上 {} 需预先知道要加载的变量名,在一个文件中可以使用多次。
  • export default: 为模块指定默认输出,这样加载时就不需要知道所加载的模块变量名,一个文件中仅可使用一次。
// caculator.js
export function add (a, b) {
  return a + b;
};

export function subtract (a, b) {
  return a - b;
}

const caculator = {
  add,
  subtract,
}

export default caculator;

import 导入

import 语句用于导入另一个模块导出的绑定,三种导入方式:

  • 导入默认值:导入在 export default 定义的默认接口。
  • as 别名导入:在导入时可以重命名在 export 中定义的接口。
  • 单个或多个导入:根据需要导入 export 定一个的一个或多个接口。
import { add } from './caculator.js';
import caculator from './caculator.js';
import * as caculatorAs from './caculator.js';

add(4, 2)
caculator.subtract(4, 2);
caculatorAs.subtract(4, 2);

import 的动态导入

可以像调用函数一样动态的导入模块,它将返回一个 Promise,但是这种方式需要 Top-Level await 支持,如果你不知道 Top-Level await 是什么可以看下这篇文章 Nodejs v14.3.0 发布支持顶级 Await 和 REPL 增强功能

现在我们有如下导出模块 my-module.js:

const sleep = (value, ms) => new Promise(resolve => setTimeout(() => resolve(value), ms));

export const hello = await sleep('Hello', 1000);
export const node = await sleep('Nodejs', 2000);
export default function() {
  return 'this is a module';
}

在 index.js 中可以像如下形式进行动态导入:

console.log('Start loading module...')
const myModule = await import('./my-module.js');
console.log('Output after 3000 ms.')
console.log(myModule.hello);
console.log(myModule.node);
console.log(myModule.default());

运行

$ n run v14.3.0 --experimental_top_level_await index.js
Start loading module...
Output after 3000 ms.
Hello
Nodejs
this is a module


总结:

1、2020-05-26 Nodejs v12.17.0 LTS 版发布,在这之前如果我们使用 ES Modules 还需要加上标志 --experimental-modules,而在本次版本发布取消了这个标志,本文也是对在 Nodejs 中使用 ES Modules 进行了入门讲解,后续也会进行更深入的研究分享,希望看完你能有所收获。

https://www.cnblogs.com/chengxuyuanaa/archive/2020/06/09/13074150.html

链接: https://www.fly63.com/article/detial/9287

深入理解ES6 Modules

当下, 我们几乎所有的项目都是基于 webpack、rollup 等构建工具进行开发的,模块化已经是常态。我们对它并不陌生,今天,我们就再系统的回顾一下ES6的模块机制

webpack4 css modules

更多 css-loader 的配置建议前往 github_css-loader 查看,因为版本更新后,配置可能会有变。配置完 webpack,写 css 时要使用相关语法,因为是通过 webpack 打包时进行编译,重新生成新的 css 类名来防止全局变量名污染的。

Node.js v13.2.0 开始支持ES modules了

Node.js 前不久发布了v13.2.0,宣布开始支持ES modules。在此之前,想要在node中使用ES modules,需要添加--experimental-module。v13.2.0版本后,可以直接使用ES modules了。

node modules是什么?

在node.js中modules(模块)与文件是一一对应的,也就是说一个node.js文件就是一个模块,文件内容可能是我们封装好的一些JavaScript方法、JSON数据、编译过的C/C++拓展等,在关于node.js的误会提到过node.js的架构

node_modules干什么的?

node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。在node.js中模块与文件是一一对应的,也就是说一个node.js文件就是一个模块。

css modules是什么?

所有的 class 的名称和动画的名称默认属于本地作用域的 CSS 文件。所以 CSS Modules 不是一个官方的规范,也不是浏览器的一种机制,它是一种构建步骤中的一个进程。

如何修改 node_modules 里的文件

有时候使用 npm 上的包,发现有 bug ,我们知道如何修改,但是别人可能一时半会没法更新,或者是我们特殊需求,别人不愿意修改,这时候我们只能自己动手丰衣足食。那么我们应该如何修改别人的源码呢?

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!