【0.5 - 前端基础】Babel转码器

目录

0.前端基础

【0.1 - 前端基础】前端开发，工具推荐与环境搭建
【0.2 - 前端基础】Node.js安装与简单使用
【0.3 - 前端基础】NPM包管理器常用命令
【0.4 - 前端基础】ES6简单了解，var、let、const的区别
【0.5 - 前端基础】Babel转码器
【0.6 - 前端基础】模块化开发
【0.7 - 前端基础】Webpack打包
【0.8 - 前端基础】Mock实现模拟数据

简介

Babel 是一个 JavaScript 编译器，ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行，所以需要Babel将ES6代码转为ES5代码，再执行。

安装

npm install --global babel-cli
//查看版本
babel --version

初始化一个项目

npm init -y

写一段ES6的代码

let arr = [1,2,3]
arr = arr.map(item => item+1)
console.log(arr)

配置babel文件（.babelrc）

安装转码器

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

创建一个名为.babelrc的文件，加入以下配置

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

转码

#单文件
#创建一个文件夹存放转码文件
mkdir babel
# --out-file 或 -o 参数指定输出文件
babel src/babel.js --out-file babel/babel.js
#或
babel src/babel.js -o babel/babel.js

#全目录
#创建一个文件夹存放转码文件
mkdir babel2
# --out-dir 或 -d 参数指定输出文件
babel src --out-dir babel2
#或
babel src -d babel2

自定义脚本，修改package.json

  "scripts": {
    "build":  "babel src\\babel.js -o babel\\babel.js"
  }

目录结构：

启动命令：

npm run build