一周掌握 ES6 核心知识，第一天

一周掌握ES6核心知识

第一天 ES6转化ES5的环境设置

任务1，基础教程

目录结构

|-- dist                                   // 编译后的文件目录
|   |-- bundle.js                          // index.js编译后的文件
|-- node_modules                           // npm安装依赖包
|-- .babelrc                               // ES6语法编译配置,Babel配置文件
|-- .gitignore                             // push忽略文件
|-- index.html                             // 入口html页面
|-- package.json                           // 依赖及配置
|-- README.md                              // 简介

安装依赖详解

"devDependencies": {
  "babel-core": "^6.26.0",              
  "babel-loader": "^7.1.2",
  "babel-preset-env": "^1.6.0",
  "webpack": "^3.6.0"
}

Babel 编写下一代Javascript的编译器。
babel-core       某些代码需要调用Babel的API进行转码，需要使用'babel-core' 模块
babel-loader    babel加载器
babel-preset-env   新的preset，根据你当前的运行环境，自动启用需要的babel插件，根据你的配置来进行选择使用某个preset插件，比如：babel-preset-es2015 babel-preset-es2016
webpack 前端自动化构建工具

webpack配置文件详解

const path = require('path');                   // 引入 node 内置的 path 模块

module.exports = {
  entry: './index.js',                          // 需要编译的文件路径
  output: {                                     // 编译后输出的配置
    filename: 'bundle.js',                      // 编译后文件名
    path: path.resolve(__dirname, 'dist')       // 编译后文件保存路径
  },
  module: {
    rules: [                                    // 加载模块文件的规则
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
  }
}

详细教程