ES6_模块化_笔记

最新推荐文章于 2023-05-16 08:49:47 发布

雨浅听风吟

最新推荐文章于 2023-05-16 08:49:47 发布

阅读量389

点赞数

分类专栏：前端文章标签： pytorch 深度学习 python

原文链接：https://www.bilibili.com/video/BV1uK411H7on?p=48&spm_id_from=pageDriver

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

文章目录

概述：
模块化的好处
模块化规范产品：
ES6 模块化语法：
ES6暴露数据语法汇总：
ES6导入模块语法汇总：
使用模块化的另一种方式：
Babel对ES6模块化代码转换

概述：

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来；

模块化的好处

模块化的优势有以下几点：

防止命名冲突；
代码复用；
高维护性；

模块化规范产品：

ES6 之前的模块化规范有：

CommonJS => NodeJS、Browserify；
AMD => requireJS；
CMD => seaJS；

ES6 模块化语法：

模块功能主要由两个命令构成：export 和 import；
export 命令用于规定模块的对外接口（导出模块）；
import 命令用于输入其他模块提供的功能（导入模块）；

ES6暴露数据语法汇总：

m.js（逐个导出模块）：

// 分别暴露（导出）
export let school = "尚硅谷";
export function teach(){
console.log("我们可以教你开发技术！");
}

n.js（统一导出模块）：

// 统一暴露（导出）
let school = "尚硅谷";
function findJob(){
console.log("我们可以帮你找到好工作！");
}
export {school,findJob}

o.js（默认导出模块）：

// 默认暴露（导出）
export default{
school : "尚硅谷",
change : function(){
console.log("我们可以帮你改变人生！");

模块化.html（引入和使用模块）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模块化</title>
</head>
<body>
<script type="module">
// 引入m.js模块内容
import * as m from "./js/m.js";
console.log(m);
console.log(m.school);
m.teach();
// 引入n.js模块内容
import * as n from "./js/n.js";
console.log(n);
console.log(n.school);
n.findJob();
// 引入o.js模块内容
import * as o from "./js/o.js";
console.log(o);
// 注意这里调用方法的时候需要加上default
console.log(o.default.school);
o.default.change();
</script>
</body

在这里插入图片描述

ES6导入模块语法汇总：

模块化.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模块化</title>
</head>
<body>
<script type="module">
// 通用方式
// 引入m.js模块内容
import * as m from "./js/m.js";
console.log(m);
console.log(m.school);
m.teach();
// 引入n.js模块内容
import * as n from "./js/n.js";
console.log(n);
console.log(n.school);
n.findJob();
// 引入o.js模块内容
import * as o from "./js/o.js";
console.log(o);
// 注意这里调用方法的时候需要加上default
console.log(o.default.school);
o.default.change();
// 解构赋值形式
import {school,teach} from "./js/m.js";
// 重名的可以使用别名
import {school as xuexiao,findJob} from "./js/n.js";
// 导入默认导出的模块，必须使用别名
import {default as one} from "./js/o.js";
// 直接可以使用
console.log(school);
teach();
console.log(xuexiao);
console.log(one);
console.log(one.school);
one.change();
// 简便形式，只支持默认导出
import oh from "./js/o.js";
console.log(oh);
console.log(oh.school);
oh.change();
</script>
</body>
</html>

在这里插入图片描述

使用模块化的另一种方式：

将js语法整合到一个文件app.js：

/ 通用方式
// 引入m.js模块内容
import * as m from "./m.js";
console.log(m);
console.log(m.school);
m.teach();

使用模块化的另一种方式.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用模块化的另一种方式</title>
</head>
<body>
<script src="./js/app.js" type="module"></script>
</body>
</html>

在这里插入图片描述

Babel对ES6模块化代码转换

Babel概述

Babel 是一个 JavaScript 编译器；
Babel 能够将新的ES规范语法转换成ES5的语法；
因为不是所有的浏览器都支持最新的ES规范，所以，一般项目中都需要使用Babel进行转换；
步骤：使用Babel转换JS代码——打包成一个文件——使用时引入即可；

步骤：

第一步：安装工具babel-cli（命令行工具） babel-preset-env（ES转换工具） browserify（打包工具，
项目中使用的是webpack）；
第二步：初始化项目

npm init -y

第三步：安装

npm i babel-cli babel-preset-env browserify

第四步：使用babel转换

npx babel js（js目录） -d dist/js（转化后的js目录） --presets=babel-preset-env

第五步：打包

npx browserify dist/js/app.js -o dist/bundle.js

第六步：在使用时引入bundle.js

<script src="./js/bundle.js" type="module"></script>

转换前后对比：

转换前：

//分别暴露
export let school = '尚硅谷';
export function teach() {
console.log("我们可以教给你开发技能");
}

转换后：

"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.teach = teach;
//分别暴露
var school = exports.school = '尚硅谷';
function teach() {
console.log("我们可以教给你开发技能");
}