ES6模块化与导出(export)导入(import)的用法

简介: 1.ES6模块化的介绍在 ES6 模块化规范诞生之前,JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。但是,这些由社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准,例如:⚫ AMD 和 CMD 适用于浏览器端的 Javascript 模块化⚫ CommonJS 适用于服务器端的 Javascript 模块化太多的模块化规范给开发者增加了学习的难度与开发的成本。因此,大一统的 ES6 模块化规范诞生了!

ES6模块化与导出(export)导入(import)的用法



文章目录

1.ES6模块化的介绍

2.什么是 ES6 模块化规范

3.在 node.js 中体验 ES6 模块化

4. ES6 模块化的导入与导出


1.ES6模块化的介绍


在 ES6 模块化规范诞生之前,JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。


但是,这些由社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化

标准,例如:


⚫ AMD 和 CMD 适用于浏览器端的 Javascript 模块化

⚫ CommonJS 适用于服务器端的 Javascript 模块化

太多的模块化规范给开发者增加了学习的难度与开发的成本。因此,大一统的 ES6 模块化规范诞生了!


2.什么是 ES6 模块化规范


ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学


习成本,开发者不需再额外学习 AMD、CMD 或 CommonJS 等模块化规范。

ES6 模块化规范中定义:


⚫ 每个 js 文件都是一个独立的模块

⚫ 导入其它模块成员使用 import 关键字

⚫ 向外共享模块成员使用 export 关键字


3.在 node.js 中体验 ES6 模块化


node.js 中默认仅支持 CommonJS 模块化规范,若想基于 node.js 体验与学习 ES6 的模块化语法,可以按照

如下两个步骤进行配置:

① 确保安装了 v14.15.1 或更高版本的 node.js

② 在 package.json 的根节点中添加 “type”: “module” 节点

在项目的终端输入npm init -y 可以快速初始化一个包管理配置文件package.json


7a2c4a81240d40cc8ac74681cc353b36.png


终端输出文件格式:node 文件名

注意:在cmd窗口中输入node -v可以查看node版本


4. ES6 模块化的导入与导出


ES6 的模块化主要包含如下 3 种用法:

(1)默认导出与默认导入

①默认导出的语法: export default 默认导出的成员


1b361eb3aebe4b4193207edc804c5b27.png


默认导出的注意事项:


每个模块中,只允许使用唯一的一次 export default,否则会报错!

②默认导入的语法: import 接收名称 from ‘模块标识符’


import m1 from "./01-默认导出.js";
console.log(m1);
// 打印输出为{ n1: 10, show: [Function: show] }


默认导入的注意事项:


默认导入时的接收名称可以任意名称,只要是合法的成员名称即可:

(2)按需导出与按需导入

①按需导出:

按需导出的语法: export 按需导出的成员


ba8b2901f2ae4ca59d666a14cde7af16.png


②按需导入:

按需导入的语法: import { s1 } from ‘模块标识符’


74f23932cccd46128b4d096545dd2bc5.png


按需导出与按需导入的注意事项

① 每个模块中可以使用多次按需导出

② 按需导入的成员名称必须和按需导出的名称保持一致

③ 按需导入时,可以使用 as 关键字进行重命名

④ 按需导入可以和默认导入一起使用


(3)直接导入并执行模块中的代码

如果只想单纯地执行某个模块中的代码,并不需要得到模块中向外共享的成员。此时,可以直接导入并执行模

块代码,示例代码如下:


e7d21da6afa940e38ede26bbe65d6c7a.png

相关文章
|
4月前
|
JavaScript 前端开发
|
1月前
|
前端开发
ES6 如何动态加载 import
ES6 如何动态加载 import
20 1
|
5月前
ES6 import导入重命名
ES6 import导入重命名
|
9月前
|
JavaScript
面试题-TS(五):TypeScript 中的模块是什么?如何导入和导出模块?
在TypeScript中,模块(Modules)是一种用于组织和管理代码的概念。模块提供了一种封装代码的方式,允许我们将相关的功能和数据组织在一起,实现代码的可重用和可维护。
|
10月前
|
前端开发 JavaScript
模块打包中CommonJS与ES6 Module的导入与导出问题详解
文章全面解析了CommonJS模块系统的模块定义、导出、导入的操作和注意事项。同时,它也简要地提到了ES6 Module的相关概念,包括命名导出、默认导出、命名导入、默认导入、混合导入和复合写法。
401 0
|
11月前
5.ES6模块导出导入
5.ES6模块导出导入
50 0
【vue2小知识】实现store中modules模块的封装与自动导入
store仓库中分模块时的需要每次导入index的问题
【vue2小知识】实现store中modules模块的封装与自动导入
|
JavaScript
【ES6】模块化语法(默认、按需导入import导出export的操作)
ES6模块化语法(默认、按需导入导出的操作)
【ES6】模块化语法(默认、按需导入import导出export的操作)
ES6模块化的导入和导出
ES6模块化的导入和导出
89 0
|
Python
Python编程:importlib.import_module动态导入模块
Python编程:importlib.import_module动态导入模块
319 0