nodejs使用esm模块化方案开发技巧必备

前端开发中的esm模式是比较流行的模块化方案，本教程开始介绍esm模块化的入门。通过本教程的学习，您可以掌握利用nodejs来开发esm模块化方案。

与cjs模式类似的，还有esm模式，这种模式就是在语法上稍有不同。在实际项目中，可能会需要你将原有的cjs模式改为esm模式，那么就需要学习本节教程的知识要点。

esm（ES Module）模块化方案实用范围更广，包含node端和浏览器端，它是在JavaScript的ES6版本推出的模块化标准。使用该模块化方案在不同浏览器可能存在兼容性问题，需要结合babel来转换代码的方式达到不同浏览器的兼容性需求。

下面开始介绍esm这种模块化方案的实际开发过程。

1、建立项目

项目结构如下:

当前项目目录: D:\MyProjects\nodejs\hello

项目配置文件: package.json

源代码文件夹: src/

----文件夹: esm/

--------文件: index.mjs

--------文件: module.mjs

2、修改package.json配置文件

{

"name": "hello",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"dev:mjs": "node src/esm/index.mjs"    //此处修改指向esm模式的启动文件

},

"keywords": [],

"author": "ljy",

"license": "ISC"

}

3、模块开发基本语法

导出模块中的值的语法

1）  export default 变量或函数

2）  export 命名导出

导入模块中的值的语法

import ... from ...

4、开发模块文件

1）最简单的导出导入

mudule.mjs直接导出值

export default "hello,ljybc"

index.mjs中导入值并输出

import m from "./module.js"

console.log(m);

命令行运行和输出

命令行：

D:\MyProjects\nodejs\hello>npm run dev:esm

控制台输出

> hello@1.0.0 dev:esm

> node src/esm/index.mjs

hello,ljybc

2）函数的导出导入

模块导出函数的文件module.mjs内容，把原有的字符串改为自定义函数

export default function ljybc(){

console.log("bcczcs");

}

index.mjs文件内容，调用导入的函数

//导入模块

import m from "./module.mjs"

//调用函数

m();

3）注意多值导出的时候，必须要使用export关键词，而不是原来的export default。

现在开始多值导出导入的开发。

module.mjs开发文件内容：

//导出函数

export function ljybc(){

console.log("bcczcs");

}

//导出变量

export const ljy="hello,ljybc";

index.mjs开发文件内容：

//导入模块

import {ljybc,ljy} from "./module.mjs"

//调用函数

ljybc();

//输出变量

console.log(ljy);

命令行

D:\MyProjects\nodejs\hello>npm run dev:esm

控制台输出：

> hello@1.0.0 dev:esm

> node src/esm/index.mjs

bcczcs

hello,ljybc

4）对象属性的方式调用导出的函数和变量

采用的方案是在导入时候语法为：import * as 对象变量名称  from "模块文件"

module.mjs文件内容不变，修改index.mjs导入时的文件的代码：

//导入模块

import * as m from "./module.mjs"

//调用函数

m.ljybc();

//输出变量

console.log(m.ljy);

同样的，命名行可以正常输出：

命令行：

D:\MyProjects\nodejs\hello>npm run dev:esm

控制台：

> hello@1.0.0 dev:esm

> node src/esm/index.mjs

bcczcs

hello,ljybc

5）导入时可能得重命名，重命名时使用as关键词

修改index.mjs文件内容：

//导入模块

import {

ljybc as ljybc2,

ljy as ljy2

} from "./module.mjs"

//调用函数

ljybc2();

const ljy=666;

//输出名称重复的变量

console.log(ljy);

//输出重命名后的变量

console.log(ljy2);

同样的，运行命令行后，可以正常运行程序。

命令行：

D:\MyProjects\nodejs\hello>npm run dev:esm

控制台输出：

> hello@1.0.0 dev:esm

> node src/esm/index.mjs

bcczcs

666

hello,ljybc

本课程的前置基础课程应该是《零基础JavaScript教程》，您可以到“编程创造城市”官网找到该课程的视频教程。

先修课程合集的学习地址：

https://bcczcs.com/ljyknowledge/courses/page/

如果您还没学习过网页的基础知识，建议学习这本web前端开发教材。它将带您从html、css、html5、css3、JavaScript、jQuery一步步基础知识做下来，让您有一个更加系统的学习。

联系作者：刘金玉