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一步步基础知识做下来，让您有一个更加系统的学习。
联系作者：刘金玉
- 发表于:
- 原文链接：https://page.om.qq.com/page/OUYuDEw4lsxKrPhT_zPkl6uw0
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
