ES模块化

  • Post author:
  • Post category:其他


一、设置ES模块化

默认情况下,node中的模块化标准是CommonJS,想要使用ES的模块化,可以采用以下两种方案:

1. 使用mjs作为扩展名。

2. 修改package.json将模块化规范设置为ES模块

当我们设置了”type”:”module”,当前项目下所 有的js文件都默认为es module

如果我们以CommonJS的模块化导出和引入模块化是如下方式:

在m1.js中编写如下代码

exports.name = "孙悟空";
exports.age = 18;
exports.gender = "男";

在index.js中引入m1模块

const person = require("./m1");
console.log(person);

下面我们将用ES模块化规范导出和引入模块化

在m1.js中编写如下代码

export let name = "孙悟空";
export let age = 18;
export let gender = "男";

在index.js中编写如下代码

import { name, age, gender } from "./m1.js";
console.log(name, age, gender);

我们这时候运行会给我们报错

提示我们缺少模块

方法一:我们使用mjs作为扩展名即可解决这个问题

在index.js中修改一下拓展名即可引入成功

import { name, age, gender } from "./m1.mjs";
console.log(name, age, gender);

方法二:修改package.json将模块化规范设置为ES模块,

1. 在当前index.js的文件夹下运行npm init -y的命名,会出现package.json文件

2. 在package.json文件中加上”type”:”module”即可

二、使用ES模块化

我们在上面代码中演示了一遍ES模块化的导出和导入

要注意的是导入m1.mjs,不能省略扩展名(官方标准)

1. 导出模块

(1)一般导出 export

export let name = "孙悟空";
export let age = 18;
export let gender = "男";

(2)默认导出 export default

export default {
    name: "孙悟空",
    age: 18,
    gender:"男"
}

2. 导入模块

(1)分别导入,该导入适用于第一种导出方式

import {name ,age ,gender } from "./m1.mjs";
console.log(name, age, gender);

(2)别名导入,该导入适用于第一种导出方式

import { name as hello, age, gender } from "./m1.mjs";
console.log(hello, age, gender);

(3)全部导入,该导入适用于第一种导出方式

import * as m1 from "./m1.mjs";
console.log(m1.name, m1.age, m1.gender);

开发时尽量避免import*的情况

(4)默认导入,该导入适用于第二种导出方式

import sum from "./m1.mjs";
console.log(sum.name, sum.age, sum.gender);

注意:

1. ES模块都是运行在严格模式下的。

2. ES模块化,在浏览器中同样支持,但是通常我们不会直接使用。

3. 通常都会结合打包工具使用。



版权声明:本文为XunLin233原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。