尚医通 (十二) --------- 模块化

我不是女神ヾ 2024-04-01 16:28 94阅读 0赞

#### 目录 ####

*  一、模块化简介
 *  二、模块化规范
 *   *  ES6 模块化规范
 *  三、使用 Babel 转码
 *  四、更多的方式

--------------------

## 一、模块化简介 ##

**A、模块化产生背景**

随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript 代码越来越庞大，越来越复杂。

![在这里插入图片描述][83dbd776e9a546d79fc9bbab14b724ed.png]  
Javascript 模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。

## 二、模块化规范 ##

*  CommonJS 模块化规范(基于ES6语法之前)
 *  ES6模块化规范（使用 ES6 语法）

### ES6 模块化规范 ###

创建 modularization\_pro 文件夹

**A、导出模块**

创建 src/teacherApi.js 文件

exportdefault {
        
    	getList() {
        
    		console.log('获取讲师列表')
    	},
    	save() {
        
    		console.log('保存讲师')
    	}
    }

**B、导入模块**

创建 src/teacherComponent.js 文件

importteacherfrom"./teacherApi.js"
    teacher.getList()
    teacher.save()

ES6使用 export 和 import 来导出、导入模块。

**C、运行程序**

nodeteacherComponent.js

注意：这时的程序无法运行的，因为 ES6 的模块化无法在 Node.js 中执行，需要用 Babel 编辑成 ES5 后再执行。

![在这里插入图片描述][6b209154b16a4369a14c0926ef1573d1.png]

## 三、使用 Babel 转码 ##

ES6 的某些高级语法在浏览器环境甚至是 Node.js 环境中无法执行。

Babel 是一个广泛使用的转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行执行。这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

**A、安装**

Babel 提供 babel-cli 工具，用于命令行转码。它的安装命令如下：

npm install -g babel-cli
    #查看是否安装成功
    babel --version

**B、初始化项目**

在 modularization 目录下初始化项目

npm init -y

**C、配置 .babelrc**

Babel 的配置文件是 .babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，presets字段设定转码规则

{
        
    	"presets": ["es2015"],
    	"plugins": []
    }

**D、安装转码器**

在 modularization 目录中安装

npm install -D babel-preset-es2015

**E、转码**

# 整个目录转码
    # --out-dir 或 -d 参数指定输出目录
    babel src -d dist

**F、运行程序**

node dist/teacherComponent.js

## 四、更多的方式 ##

ES6 模块化规范还有一些其他的语法格式，常见的另一种写法如下：  
src/teacherApi.js：

exportfunctiongetList() {
        
    	console.log('获取讲师列表2')
    }
    exportfunctionsave() {
        
    	console.log('保存讲师2')
    }
    
    src/teacherComponent.js：
    
    import {
        getList, save} from"./teacherApi.js"
    getList()
    save()

[83dbd776e9a546d79fc9bbab14b724ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3e22aea8b86d46ed85237a921927aebc.png
[6b209154b16a4369a14c0926ef1573d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d08b6cad2a1a41beba6ef9c52a3c0041.png