前端模块化（CommenJS规范、ES6规范）

刺骨的言语ヽ痛彻心扉 2022-11-04 01:34 321阅读 0赞

### 目录 ###

*  1. 简介
 *  2. CommonJS规范
 *  3. ES6模块化规范
 *   *  写法一
     *  写法二（推荐）

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

# 1. 简介 #

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

Javascript**模块化编程**，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持”类”（class），包（package）等概念，也不支持”模块”（module）。

**因此引入了两种模块化规范：**

*  `CommonJS`模块化规范
 *  `ES6`模块化规范

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

# 2. CommonJS规范 #

> 每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。
> 
> `CommonJS` 使用 exports 和 require 来导出、导入模块

项目结构：  
![image-20210203001545536][]  
首先创建`四则运算.js`，作为工具类来使用，其中定义四个方法，然后导出所有方法

//四个方法
    const sum = function (a, b) { 
        return a + b
    }
    const sub = function (a, b) { 
        return a - b
    }
    const mul = function (a, b) { 
        return a * b
    }
    const div = function (a, b) { 
        return a / b
    }
    
    //导出
    // module.exports = { 
    // sum: sum,
    // sub: sub,
    // mul: mul,
    // div: div
    // }
    
    //可简写成
    module.exports = { 
        sum,
        sub,
        mul,
        div
    }

然后创建`test.js`引入上述模块测试

const fun = require('./四则运算.js');
    
    console.log(fun.sum(1,2));
    console.log(fun.sub(1,2));
    console.log(fun.mul(1,2));
    console.log(fun.div(1,2));

运行程序测试  
![image-20210203000434020][]

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

# 3. ES6模块化规范 #

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

## 写法一 ##

项目结构：  
![image-20210203002019295][]  
首先创建`工具.js`，作为工具类来使用，其中定义并导出两个方法

export function get(){ 
        console.log("获取");
    }
    
    export function save(){ 
        console.log("保存");
    }

然后创建`工具.js`，用来导入上述方法并测试

//导入方法
    import { get,save} from './工具.js';
    
    get();
    save();

运行测试：发现报错了  
![image-20210203130153521][]  
这是因为`nodejs`默认不支持es6的`import`语法，我们需要用`Babel`转换成ES5语法再执行

初始化项目成一个`nodejs`项目

npm init -y

![image-20210203130634595][]编写`.babelrc`配置文件

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

然后安装转码器，在项目中安装

npm install --save-dev babel-preset-es2015

![image-20210203131016415][]  
然后就可以进行转码，我们将在项目根目录下创建`src`目录，然后将`测试.js`和`工具.js`移入，再输入如下命令转码

babel src -d dist

然后打开新生成`dist/测试.js`运行测试  
![image-20210203133121257][]  
成功显示结果！

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

## 写法二（推荐） ##

`工具.js`修改为：

export default { 
        get() { 
            console.log("获取");
        },
        save() { 
            console.log("保存");
        }
    }

`测试.js`修改为：

//以对象形式导入
    import tool from './工具.js';
    
    tool.get();
    tool.save();

然后同样进行转码执行即可

[image-20210203001545536]: /images/20221023/0f553f95dd8e4db68447db21420062ca.png
[image-20210203000434020]: /images/20221023/612a0833d4334debb91e99cdf815b1a9.png
[image-20210203002019295]: /images/20221023/cb9fa8c771864a0ba6fe93fe60727831.png
[image-20210203130153521]: /images/20221023/bed35c987f1447ee9972776211aaeee9.png
[image-20210203130634595]: /images/20221023/927c92cfa10c4d8c95d85605317bf220.png
[image-20210203131016415]: /images/20221023/b9bb619b499c4fcaaf56929c64873b3e.png
[image-20210203133121257]: /images/20221023/d39ea315640245269e6f7d5b8cdcf7e0.png