ES6的模块化

最新推荐文章于 2022-10-25 14:15:48 发布

执笔流年233

最新推荐文章于 2022-10-25 14:15:48 发布

阅读量167

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_69356624/article/details/124527923

版权

ES6模块化

	1.每个js文件都是一个独立的模块
	2.导入其它模块使用 `input` 关键字
	3.向外共享模块使用 `export`关键字

commonJS规范(node.js)

	1.导入其它模块使用 `require`关键字
	2.向外共享模块使用 `module.exports` 关键字

在node.js 中搭建学习es6模块化的环境

让node.js 支持ES6模块化

node.js中默认支持 CommonJS模块化规范,如果想基于node.js体验与学习ES6的模块化语法,需要按照如下两个步骤进行配置
1.确保安装了v13.0.0或更高版本的node.js
2.在 package.js 的根节点中添加 "type":"module"节点
在这里插入图片描述
注意: 配置之后,则只能使用ES6模块化语法,不能再使用CommonJS语法了

ES6模块化 --默认导入导出

默认导出的语法: export default 默认导出的成员
默认导入的语法: import 接收名称 from ‘模块路径(不能省略后缀)’
在这里插入图片描述
注意:
1.每个模块中,只允许使用唯一的一次 export default
2.默认导入时的接收名称可以任意名称,只有是合法的成员名称即可

ES6模块化 --按需导入导出

按需导出的语法: export const s1 = 10
按需导入的语法: import{按需导入的名称} from '模块路径'
在这里插入图片描述
注意:
1.每个模块中可以有多次按需导出
2.按需导入的成员名称必须和按需导出的名称保持一致
3.按需导入时,可以使用 as 关键字重命名

默认导出和按需导出一起使用

在这里插入图片描述

拓展: 让chrome浏览器支持ES6模块化

文件目录

index.html # 引入index.js
index.js # 引入 tool.js
tool.js

index.html

<!DOCTYPE html>
<html lang="zh">
  注意这里的module
  <script type="module" src="./index.js"></script> 
</html>

index.js

import {a,b} from './tool.js'
console.log(a,b)

tool.js

export const a = 1;
export const b = 2;

执笔流年233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6的模块化

ES6模块化 1.每个js文件都是一个独立的模块 2.导入其它模块使用 `input` 关键字 3.向外共享模块使用 `export`关键字commonJS规范(node.js) 1.导入其它模块使用 `require`关键字 2.向外共享模块使用 `module.exports` 关键字在node.js 中搭建学习es6模块化的环境让node.js 支持ES6模块化node.js中默认支持 CommonJS模块化规范,如果想基于node.js体验与学习ES6的模块化语法,需要按照如下
复制链接

扫一扫