Bable详解和前端模块化

Babel详解

1. 简介

• ES6的某些高级语法在浏览器环境甚至是Node.js中无法执行
• Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行

2. 安装

• 安装命令行转码工具

npm install -g babel-cli

• 检查是否安装成功

babel --version

3. Babel的使用

• 创建bable文件夹
• 初始化项目

npm init -y

• 创建文件夹src
• 在文件夹src中创建文件example.js，并写下面的ES6代码

//转码前
let input =[1,2,3]
//将数组的每个元素加1
let input=input.map(a=>a+1)
console.log(input)

• 在根目录中创建.babelrc文件，配置.babelrc（Bable的配置文件是.babelrc，存放在根目录下，该文件用来设置转码规则和插件，基本格式如下）

{
  "presets":["es2015"],//这是将es2015规则加入
  "plugins":[]
}

• 安装转码器，在这个项目中安装（cmd中输入命令行）

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

• 转码

babel src -d dist

前端模块化开发

1. 简介

• 随着网站逐渐变成“互联网应用程序” ， 嵌入网页的javascript代码越来越庞大，越来越复杂，javascript模块化编程已经成为一个迫切的需求
• 模块化规范
  • CommonJS模块化规范
  • ES6模块化规范

2. CommonJS规范

• 创建文件—四则运算.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 di = function(a,b){
    return a/b;
}

//导出给别人使用，commomJS模块化开发
module.exports={
    sum,
    sub,
    mul,
    di
}
//需要导出才能使用

• 创建文件----导入测试.js

//require 导入
const m = require('./四则运算.js');
let c=m.sum(1,2);
console.log(c);
console.log(m.mul(1,2));
console.log(m.sub(1,2));
console.log(m.di(1,2));

• commonJS使用 exports导出，require导入

2. ES6模块化规范

• 创建导出文件 --userApi.js

//普通写法
// //用export导出
// export function getList(){
//     //在真实业务中，异步获取数据
//     console.log("获取数据列表");
// }

// export function save(){
//     //在真实业务中，异步获取数据
//     console.log("保存数据");
// }

//新版写法，也最常见，将要导入的化为一个整体
export default{
    getList(){
        console.log("获取数据列表");
    },
    save(){
        //在真实业务中，异步获取数据
        console.log("保存数据");
    }
}

• 创建导入文件—userTest.js

//普通写法
//导入模块import

//import {getList,save} from './userApi'

//getList()

//save()





//新版写法，导入的所有模块作为一个整体（对象）

import user from './userApi'

user.getList()

user.save()

• nodejs默认不支持es6语法的 import，所以要降级，用bable，回顾之前bable如何使用

  • 先初始化 npm init -y
  • 根目录中创建文件夹 src，放业务代码
  • 跟目录中创建bable配置文件----- .babelrc

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

  • 安装转码器

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

  • 创建dist文件夹----在package.json中

    "build": "babel src -d dist"
  

  • 运行脚本build npm run build ,然后会在dist中生成和src一一对应的转码后的文件
  • 运行dist中的文件

  node .\dist\userTest.js