js模块化--前端学习（5）

一、模块化介绍

1）实现js代码的复用

2）将js代码的模块详细分化，更好的去理解每一个js，也简化了每一个js代码。

二、ES5模块化规范

1）创建引用的模块

创建es5/common.js文件

// 定义成员
const sum=function(a,b){
    return parseInt(a)+parseInt(b)
}
const subtract = function(a,b){
    return parseInt(a) - parseInt(b)
}

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

2. 创建调用板块

创建es5/main.js

// 进行模板的导入
const common=require("./common.js")

//进行方法的调用
const sumResult=common.sum(1,2)
const subtractResult=common.subtract(9,3)

console.log(sumResult,subtractResult)

3）在终端执行代码

node .\es5\main.js

三、ES6模块化规范

1)创建引用模块

创建文件：es6/common.js

export default{
    sayHello(){
        console.log("hello World")
    },
    sayBay(){
        console.log("good bay!!!")
    }
}

2）创建调用模块

创建文件：es6/main.js

import common from "./common.js"

common.sayBay()
common.sayHello()

3）在终端执行代码

使用babel前，一定要记得在根目录创建 .babelrc 文件

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

# 创建es6转化到es5的文件夹
mkdir es6-es5
# 将es6进行转化成es5
babel es6 -d .\es6-es5\

# 如果没有进行转化，es6是无法进行执行的
node .\es6-es5\main.js 

四、ES6模块化规范的另一种写法

1)创建引用模块

创建文件：es6/common.js

export function sayHello(){
    console.log("hello World")
}
export function sayBay(){
    console.log("good bay!!!")  
}

2）创建调用模块

import {sayBay,sayHello} from "./common.js"

sayBay()
sayHello()

3）在终端执行代码

使用babel前，一定要记得在根目录创建 .babelrc 文件

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

# 创建es6转化到es5的文件夹
mkdir es6-es5
# 将es6进行转化成es5
babel es6 -d .\es6-es5\

# 如果没有进行转化，es6是无法进行执行的
node .\es6-es5\main.js