ES6——12——ES6模块化介绍、优势以及产品

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量296 收藏 1
点赞数
分类专栏： ES6 文章标签： javascript node.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x1037490413/article/details/119449021
版权

目录

1.模块化介绍

在这里插入图片描述在这里插入图片描述

2.模块暴露

注意：因为Module 的加载实现的是es6语法，所以在浏览器加载html文件时，需要在script 标签中加入type="module"属性。
分别暴露和统一暴露的文件需要引入的话要加{} 默认暴露不用

2.1分别暴露

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 因为Module 的加载实现的是es6语法，所以在浏览器加载html文件时，需要在script 标签中加入type="module"属性。 -->
    <script type="module">
      //引入m.js模块内容
    import * as m from './es6.js'
    console.log(m);
    </script>
  </body>
</html>

js

export let name='找工作'
export function work(){
  console.log('15号投简历');
}

2.2 统一暴露

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 因为Module 的加载实现的是es6语法，所以在浏览器加载html文件时，需要在script 标签中加入type="module"属性。 -->
    <script type="module">
      //引入m.js模块内容
    import * as m2 from './m2.js'
    console.log(m2);
    </script>
  </body>
</html>


let name='刘涛'
function actor(){
  console.log('刘涛是个演员');
}
export{name,actor}

2.3默认暴露

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 因为Module 的加载实现的是es6语法，所以在浏览器加载html文件时，需要在script 标签中加入type="module"属性。 -->
    <script type="module">
    import * as m3 from './m3.js'
    console.log(m3);
    m3.default.tv()
    </script>
  </body>
</html>


export default{
  name:'陈娇蕊',
  tv:function(){
    console.log('电视剧主演');
  }
}

3.引入模块数据语法汇总

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 因为Module 的加载实现的是es6语法，所以在浏览器加载html文件时，需要在script 标签中加入type="module"属性。 -->
    <script type="module">
      //1.通用的导入方式
      // import * as m1 from "./m1.js"
      // import * as m2 from "./m2.js";
      //import * as m3 from "./m3.js";
      // console.log(m1);
      //m3的输出结果是个对象，对象有个属性是default，数据存在default里
      // console.log(m3);
      //console.log(m3.default.name);


      //2.解构赋值形式
      //2.1  m1模块
      // import { name, work } from "./m1.js";
      // console.log(name);
      // work();
      // 2.2  m2模块   m2的和m1重名了，用as取个别名
      // import { name as name2, actor } from "./m2.js";
      // console.log(name2);
      // actor();
      // //2.3  m3模块
      // //数据default里存着的，但是不能直接用default 要取个别名
      // import { default as m3 } from "./m3.js";
      // console.log(m3.name);
      // m3.tv();
 
      //3.简便形式，针对默认暴露
      import m3 from "./m3.js"
      console.log(m3);

    </script>
  </body>
</html>

m1.js

export let name='找工作'
export function work(){
  console.log('15号投简历');
}

m2.js

let name='刘涛'
function actor(){
  console.log('刘涛是个演员');
}
export{name,actor}

m3.js

export default{
  name:'陈娇蕊',
  tv:function(){
    console.log('电视剧主演');
  }
}

4.浏览器使用es6模块化

m1.js

export let name="金城武"
export function handsome(){
  console.log('大帅哥');
}

app.js 相当于是入口文件

import * as m1 from "./m1.js"
console.log(m1);

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 因为Module 的加载实现的是es6语法，所以在浏览器加载html文件时，需要在script 标签中加入type="module"属性。 -->
    <script src="./app.js" type="module">
    </script>
  </body>
</html>

5.babel对es6模块化代码转换

在项目中通常要使用babel进行转换,能把es6语法转换为es5
1.安装工具 babel-cli babel-preset-env browserify(webpack)
在这里插入图片描述

2.因为选择的是局部安装，所以npx babel 命令 ,如果是全局安装，可以直接使用babel命令
这行命令的第一个参数src/js是源文件目录下的文件夹，第二个参数是要转换到dist目录下js文件夹下
运行后会自动生成dist和js文件夹，里面就是转换好的文件
在这里插入图片描述3.打包 npx browserify dist/js/app.js -o dist/bundle.js， -o是输出的意思，此时会多一个bundle.js文件
在这里插入图片描述打包之后，回到home.html，引入bundle.js文件
如果我们要修改代码，要在源文件src中修改，不在打包好的dist中修改，修改完代码后页面不会有最新结果，因为我们引入的是bundle.js文件，因此我们需要重新打包

重新输入这两行命令即可
在这里插入图片描述
文件目录展示：
在这里插入图片描述
代码展示：
home.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
   <script src="dist/bundle.js" type="module"></script>
</body>
</html>

m1.js

export let name="金城武"
export function handsome(){
  console.log('大帅哥');
}

m2.js

let name = "刘涛";
function actor() {
  console.log("刘涛是个演员");
}
export { name, actor };

m3.js

export default {
  name: "陈娇蕊",
  tv: function () {
    console.log("电视剧主演");
  },
};

app.js

import * as m1 from "./m1.js"
import * as m2 from "./m2.js";
import * as m3 from "./m3.js";
console.log(m1);
console.log(m2);
console.log(m3);

m1.handsome()
m2.actor()
m3.default.tv()

6.ES6模板引入NPM包

1.先下载包
2.在入口文件用import导入import 变量名 from 包名
我们这里用引入jquery包举例
在这里插入图片描述在这里插入图片描述
然后重新打包就可以了
在这里插入图片描述

野生小米椒
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6——CommonJS与ES6模块化规范区别
chengzhangdewo的博客
09-26 157
CommonJS 1.对于基本数据类型，属于复制。即会被模块缓存。同时，在另一个模块可以对该模块输出的变量重新赋值。 // number.js let num = 1 function add() { num++ } module.exports.num = num module.exports.add = add // main.js var number = require('./number') //1 console.log(number.num) number.add() /..
狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用笔记
06-20
综上所述，"狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用笔记"这个主题涵盖了现代前端开发的重要技术栈。Node.js作为后端基础，Npm辅助管理依赖，ES6提供了更优雅的语法，Babel确保了新特性的...
ES6——类以及模块化管理
syy的博客
11-11 582
ES6 类以及模块化管理
（19）es6——模块化
浪头的博客
04-24 3454
在浏览器中使用es6模块化方式1 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
ES6 —— 模块化
z_2532040197的博客
07-12 101
ES6中的模块的定义以及使用
ES6——模块
鹿蹊zz的博客
07-21 201
在ES6前，实现模块化使用的是RequireJS或者seaJS（分别是基于AMD规范的模块化库，和基于CMD规范的模块化库）。ES6引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6的模块化分为导出（export）@与导入（import）两个模块。...
ES6学习——面向对象和模块化
我们的目标是星辰大海
10-09 429
1.面向对象 是ES5的语法糖 内部机制一样 但是更简单了 1.构造函数 ES5的构造函数 function Animal(name,age){ this.name = name; this.age = age; } let animal = new Animal('terry',12); ES6的类 class Animal{ constructor(name,age){ ...
ES6模块化简单使用——import关键字、export关键字
Concise200的博客
02-26 1176
ES6模块化1. 介绍2. 默认导出与默认导入默认导出默认导入3. 按需导出与按需导入按需导出按需导入4. 直接导入并执行模块中的代码 1. 介绍 1.在ES6模块化规范诞生之前，JavaScript社区已经尝试并提出了AMD、CMD、CommonJS等模块化规范。但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准。 AMD和CMD适用于浏览器端的JavaScript模块化 CommonJS适用于服务器端的JavaScipt模块化 例如在node.js遵循
JavaScript——ES6新增特性模块化
qq_52748669的博客
07-13 250
JavaScript——ES6新增特性模块化
ES6学习笔记——ES6模块化以及与CommonJS区别
hsy_hhh的博客
09-08 186
一、设置ES6模块化 ES6模块中node环境必须是在12版本以上，否则不兼容 package.json中添加 type:”module” 二、引入ES6模块——import命令 静态的import 语句用于导入由另一个模块导出的绑定。 1. import * as person from './person.js' //导入整个模块内容 2. import {firstName,lastName} from './person.js' //导入多个接...
ES6新特性之模块Module用法详解
08-30
ES6引入了一项重要的新特性——模块(Module)，这是为了解决JavaScript长期以来缺乏...这种静态化的模块系统不仅解决了JavaScript的模块化问题，还提升了代码的可维护性和性能，成为了现代JavaScript开发的标准实践。
JavaScript：ES6新特性：类与模块教程
07-14
本文将重点介绍ES6中两个非常实用的新特性：类与模块。 #### 二、基础知识回顾 在深入了解ES6的新特性之前，我们先快速回顾一下JavaScript的基础知识。 ##### 2.1 变量与数据类型 在JavaScript中，变量用于存储...
ES6参考手册pdf高清带目录
02-09
第六版，也就是ES6，是历史上最大的一次更新，引入了模块化、面向对象的语法、Promise、箭头函数、let和const关键字、数组解构赋值等重要特性。之后的版本，如ES7至ES10，继续添加了诸如幂运算符、异步/等待（async/...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 652
JavaScript青少年简明教程：函数及其相关知识（下）
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 80
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 431
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1310
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值