前端模块化操作 - （ES5与ES6 Babel转换ES5）

前端模块化相当与在后端写不同的包-方法然后有需要的时候再引入

一、ES5 创建一个文件夹es5module 使用01.js与02.js举例

01.js

// 01.js中创建两个方法

const sum = function(x,y){
    return parseInt(x) + parseInt(y)
}

const subtract = function(x,y){
    return parseInt(x) - parseInt(y)
}

//设置哪些方法可以被其他js调用
module.exports = {
    sum,
    subtract
}

02.js

// 02.js 引入01.js中的方法
const m = require('./01')

//调用
console.log(m.sum(1,1))
console.log(m.subtract(1,1))

控制台打印输出 

在es5中，需要注意的就是在01.js中将要公开的方法加入module.exports中，然后再02.js中引入需要使用的js类就可以了 - const x = require('路径名')

 二、ES6 

在Node v13.2.0之前，ES6的模块化操作是没办法直接在Node.js中执行的（其他操作可以），需要使用Babel转码成ES5后才可执行

首先我们使用 npm install --global babel-cli 命令安装

看看安装好没有 babel --version

然后创建一个.babelrc文件，名字就是.babelrc固定的名称，在文件中加入

{
    "presets": ["es2015"],    //转码规则
    "plugins": []             //转码插件
}

因为转码规则定义es2015 所以再安装一个转码器  

        npm install --save-dev babel-perset-es2015

 Babel转换有两种方式

        babel src/example.js --out-file dist1/compiled.js     或者

        babel src/example.js --o dist1/compiled.js        //指定文件输出

        

        babel src --out-dir dist2    或者

        babel src -d dist2         //指定文件夹输出

 同样先创建两个js

 02.js

//定义方法，设置哪些方法可以被其他js调用
export function getList(){
    console.log('获取列表')
}

export function saveList(){
    console.log('保存列表')
}

03.js

//引入方法来源
import { getList,saveList } from "./02";

//调用方法
getList()
saveList()

使用Babel转码

babel es6 -d es6-5         //将es6文件夹中的内容 全部转码为es5格式 并且放在es6-5文件夹中

控制台执行 

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

es6还有一种简便写法

export default {
    getList(){
        console.log('xxxx')
    }
...............
}    //只需要在括号内定义方法就可以了

引入可以写成

import x from './01.js'
//使用x.方法来调用
x.getList()

OK 🙆‍♂️