前端模块化开发

1.模块化产生的背景

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。

但是，Javascript不是一种模块化编程语言，它不支持"类"（class），包（package）等概念，更遑论"模块"（module）了。

2.什么是模块化开发

传统非模块化开发有如下的缺点：

命名冲突
文件依赖

模块化规范：

CommonJS模块化规范
ES6模块化规范

3.CommonJS模块规范

每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

①创建model文件夹，在该文件夹下创建es5文件夹然后分别创建1.js导出文件以及2.js导入文件

// 1.js导出文件
// 定义成员：
const sum = function(a,b){
    return parseInt(a) + parseInt(b)
}
const subtract = function(a,b){
    return parseInt(a) - parseInt(b)
}

//导出成员
module.exports = {
    sum,
    subtract
}

//2.js导入文件
//引入模块,注意：当前路径必须写./
const m = require('./1.js')
console.log(m)

const result1 = m.sum(1,2)
const result2 = m.subtract(1,2)
console.log(result1,result2)

②执行结果如下

CommonJS使用 exports 和require 来导出、导入模块。

4.ES6模块化规范

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

①在model文件夹下创建es6文件夹，然后再该文件夹下创建1.js导出文件和2.js导入文件

// 1.js导出文件
export function getList(){
    console.log("查询数据列表...")
}
export function save(){
    console.log("保存数据...")
}

// 2.js导入文件
import {getList,save} from "./01.js"
getList()
save()

创建成功后，在终端使用node执行该命令，结果会报下面的错误

前端模块化开发-LMLPHP

这个错误不是es6语法的错误，是因为node不支持es6规范导致的，所以我们需要使用babel工具进行转码工作，将es6的js文件转为es5的文件，转码命令如下，改babel的命令就是将es6文件夹下的所有js文件全部转换为es5文件夹下的js文件

前端模块化开发-LMLPHP

babel es6 -d es5

前端模块化开发-LMLPHP

最终的执行结果如下

所以使用node工具将es6规范的js文件转换为es5规范的js文件在进行执行

kobe_IT

前端模块化开发