es6的模块化

最新推荐文章于 2022-09-14 12:58:29 发布

九九nine9

最新推荐文章于 2022-09-14 12:58:29 发布

阅读量108

点赞数

分类专栏： Node.js 文章标签： node.js es6

本文链接：https://blog.csdn.net/weixin_65100963/article/details/124519754

版权

Node.js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

模块化的发展

es6之前：

● amd规范
● cmd规范

es6之后：

● es6模块化
○ 每个 js 文件都是一个独立的模块
○ 导入其它模块使用 import 关键字
○ 向外共享模块使用export关键字
● commonJS规范(nodejs)
○ 导入其它模块使用 require关键字
○ 向外共享模块使用 module.exports关键字

在nodejs中搭建学习es6模块化的环境

让nodejs支持ES6模块化

node.js 中默认支持 CommonJS 模块化规范，如果想基于 node.js 体验与学习 ES6 的模块化语法，需要按照如下两个步骤进行配置

● 确保安装了 v13.0.0 或更高版本的 node.js
● 在 package.json 的根节点中添加 “type”: "module"节点

在这里插入图片描述
注意：配置之后，则只能使用ES6模块化语法，不能再使用CommonJS语法了

基本文件结构

根目录
├── index.js # 主页需要用到的js代码
└── tool.js # 为整个项目提供公共方法

运行代码：node index.js

es6模块化的内容

默认导入导出

默认导出的语法： export default 默认导出的成员
默认导入的语法： import 接收名称 from '模块路径
在这里插入图片描述
注意:

每个模块中，只允许使用唯一的一次 export default
默认导入时的接收名称可以任意名称，只要是合法的成员名称即可

按需导入导出

按需导出的语法： export const num = 10
按需导入的语法： import { 按需导入的名称 } from '模块路径'

注意:

每个模块中可以有多次按需导出
按需导入的成员名称必须和按需导出的名称保持一致
按需导入时，可以使用 as 关键字进行重命名

在这里插入图片描述

默认导出和整体导出一起使用

在这里插入图片描述

es6导入导出小结

在tool.js中导出方式	在index.js中导入的方式	…
export let name=‘’; export function f=function()	import {name,f} from ‘./tool.js’	正确
export {name,f}	import {name,f} from ‘./tool.js’	正确
export default {name,f}	import obj from ‘./tool.js’	正确
export ｛ name, f}	import obj from ‘./tool.js’	错误
export {name,f}; export default {version};	import obj, {name,f} from ‘./tool.js’	正确

拓展：让chrome浏览器支持es6模块化

文件目录

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

index.html
script type=“module” src=“./index.js”

<!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;

九九nine9

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录