前端模块化开发

1 ES5的方式实现模块化开发

在工作区中创建两个js文件用于演示模块化开发的代码构建。

1. npm初始化

npm init -y

1. 在01.js文件中编写代码，作为导出模块的js文件

//1 定义函数
// 加法函数
const sum = function(num1,num2){
    return parseInt(num1) + parseInt(num2);
};
//减法函数
const sub = function(num1,num2){
    return parseInt(num1) - parseInt(num2);
}

//2 导出模块
module.exports = {
    sum,
    sub
};

2. 在02.js文件中编写代码，作为导入模块的js文件

//1 导入模块
const m = require("./01.js");

//2 使用函数
console.log(m.sum(1,2));
console.log(m.sum(100,20));

3. 在02.js文件所在目录执行如下代码即可得到结果

node 02.js

2 ES6的方式实现模块化开发

2.1 方法一

1. npm初始化

npm init -y

1. 在01.js文件中编写代码，作为导出模块的js文件

export function sum(num1,num2){
    return parseInt(num1) + parseInt(num2);
}

export function sub(num1,num2){
    return parseInt(num1) - parseInt(num2);
}

2. 在02.js文件中编写代码，作为导入模块的js文件

import {sum,sub} from "./01.js"

console.log(sum(2,3));
console.log(sub(20,8));

3. 由于es6的模块化无法通过nodejs运行，故需要使用babel将es6的文件转换为es5才可以执行。babel工具的配置方法可参考babel的配置说明博客。

2.2 方法二

1. 在01.js文件中编写代码，作为导出模块的js文件

export default{
    sum(num1,num2){
        return parseInt(num1) + parseInt(num2);
    },
    sub(num1,num2){
        return parseInt(num1) - parseInt(num2);
    }
}

2. 在02.js文件中编写代码，作为导入模块的js文件

import m from "./01.js"

console.log(m.sum(2,3));
console.log(m.sub(20,8));

3. 使用babel将es6的文件转换为es5即可执行。