ES6开发环境准备--babel配置(1)

前言:

　　公司项目目前用vue开发，项目中使用es6语法，但是开发中偶尔有些语法会混淆和遗忘，此处作以记录，方便自己回顾和翻阅。

　　1.babel初识

　　　　功能：babel是一个JavaScript的编译器，将ES6语法编译成浏览器所识别的ES5语法。

　　　　用法：

1>REPL在线编辑：

　　　　　　　　我们可以使用babel提供的在线的REPL环境完成ES6语法的转换(https://babeljs.cn/repl)　

　　　　　　 2>Babel CLI命令行：

　　　　　　　　我们通过在本地安装babel cli工具，配置.babelrc文件，通过命令完成ES6语法的转换，详细操作继续往下读。

　　　　　　3>Babel结合webpack

　　　　　　　 Babel结合webpack完成ES6转ES5的操作。

2.babel-cli实践

　　1>创建工程：根目录中创建了一个src和dist的文件夹

　　　　　　src：存放ES6编写的文件。

　　　　　　dist：存放通过babel编译后的ES5文件。

　　　　2>创建文件：编写index.html和index.js文件

　　　　　　index.html文件：注意引入的是dist/index.js

<!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">
    <script src="./dist/index.js"></script>
    <title>babel配置入門</title>
</head>
<body>
    <script>
        printMsg()
    </script>
</body>
</html>

　　　　　　index.js文件：

let str = 'ES6关于babel配置第一节'
let printMsg = () => {console.log(str)}

　　　　3>初始化项目

　　　　　　npm init命令，在根目录中生成package.json文件

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

　　　　4>安装babel-cli、配置.babelrc文件

　　　　　　1.项目中安装了es2015的转码规则和babel-cli

　　　　　　　　命令：npm install --save-dev babel-preset-es2015 babel-cli

　　　　　　　　安装结果：package.json文件中多了配置项。

"devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }

　　　　　　2.配置.babelrc文件

　　　　　　　　1>在根目录下新建.babelrc文件

　　　　　　　　2>配置转码规则presets和plugins

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

　　　　5>ES6转为ES5操作：

　　　　　　1.babel命令转化

　　　　　　　　1>命令行输入：babel src/index.js -o dist/index.js

　　　　　　　　2>转码结果：dist/index.js

　　　　　　2.简化转化：可以在package.json文件中配置转化命令

　　　　　　　　1>规则配置

　　　　　　　　2>执行命令

　　3.babel-cli命令补充

　　　　1、转换index.js文件并在当前命名行程序窗口中输出

　　babel src/index.js

　　　　2、将src/index.js转换后输出到dist/index.js文件中（使用 -o 或 --out-file ）

　　babel src/index.js -o dist/index.js 

　　babel src/index.js --out-file dist/index.js

　　　　3、实时监控es6.js一有变化就重新编译（使用 -w 或 --watch ）

　　babel src/index.js -w --out-file dist/index.js

　　babel src/index.js --watch --out-file dist/index.js

　　　　4、编译整个src文件夹并输出到lib文件夹中（使用 -d 或 --out-dir ）

　　babel src -d dist

　　babel src --out-dir dist

　　　　5、编译整个src文件夹并输出到一个文件中

　　babel src --out-file /dist/index.js

　　　　6、直接输入babel-node命令，可以在命令行中直接运行ES6代码

　　babel-node

　　　4.babel结合webpack实践

　　　　1>在之前的基础上我们需要安装webpack，和babel-loader。

　　　　npm install --save-dev webpack babel-loader

　　　　安装结果：使用webpack编译，此处的babel-cli没有任何作用了，如果需要卸载可以使用npm uninstall webpack命令即可。

　　　　2>配置webpack.config.js

module.exports = {    
    entry: './src/index.js',  //程序入口文件  
    output: {  //程序输出文件路径设置
        path: __dirname,    
        filename: './dist/index.js',    
    },    
    module: {    
        loaders: [{    
            test: /.js$/,    
            exclude: /node_modules/,    
            loader: 'babel-loader'  //babel加载器
        }]    
    }    
}

　　　　3>运行webpack命令

　　　　出现绿色的结果就表示，命令运行结果成功了。

总结：以上ES6转ES5方式，大家可以任选其一，但是推荐使用webpack，随着前端功能的复杂化，webpack已经成为前端很多项目中必不可少的工具，尽快掌握最好。