GEN

# es6 转换 es5

# 创建项目 webpack环境

mkdir babel-compile
cd babel-compile
npm init -y

# 安装babel 环境依赖

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

# 新建.babelrc文件

  • 根目录下新建 .babelrc文件,写入如下代码
{
    "presets":["es2015","latest"],
    "plugins":[]
}

# 全局安装 babel-cli 命令行

npm install -g babel-cli
babel --version

# 运行babel命令，编译文件

  • 新建src文件夹,建util.js,新建dist文件夹放编译过的文件
const firstFun = () => {
    console.log('i am first es6 module');
}

const mapArr = [1,2,3];
const mapFun = () => {
    const result = mapArr.map(item => item + 1);
    console.log(result);
}

firstFun();
mapFun();
  • 运行命令
babel ./src/util.js --out-file ./dist/compiled-util.js

# html引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../dist/compiled-util.js" type="text/javascript"></script>
</head>
<body>
    
</body>
</html>

# 查看效果

  • 打开浏览器F12