ES6 虽提供了许多新特性，但我们实际工作中用到频率较高并不多，根据二八法则，我们应该用百分之八十的精力和时间，好好专研这百分之二十核心特性，将会收到事半功倍的奇效。接下来将会三篇文章着重介绍这些核心特性。
如果你想了解解构赋值，箭头函数以及展开运算符，请猛戳 ES6核心特性（二）
如果你想了解数组常见的遍历方法及其使用场景，请猛戳ES6核心特性（三)
二、开发环境配置这部分着重介绍：babel 编译ES6语法，如何用webpack和rollup实现模块化。
1.babel 为啥需要babel？ES6 提供了许多新特性，但并不是所有的浏览器都能够完美支持。下图是各个浏览器对ES6兼容性一览表(以export为例)
由上图可知，有些浏览器对于ES6并不是很友好，针对 ES6 的兼容性问题，很多团队为此开发出了多种语法解析转换工具(比如babel，jsx，traceur 等)，可以把我们写的 ES6 语法转换成 ES5，相当于在 ES6 和浏览器之间做了一个翻译官。其中Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
如何配置babel？·首先要先安装node.js，运行npm init，然后会生成package.json文件 ·npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest ·创建并配置.babelrc文件//存放在项目的根目录下，与node_modules同级 ·npm install -g babel-cli ·babel-version
Babel的配置文件是.babelrc，存放在项目的根目录下。该文件用来设置转码规则和插件，具体内容如下：
//.babelrc文件
{
"presets": ["es2015", "latest"],
"plugins": []
}
验证配置是否成功
·创建./src/index.js ·内容：[1,2,3].map(item=>item+1）； ·运行babel./src/index.js
运行后得到以下部分，说明已经成功配置了babel
"use strict";
[1, 2, 3].map(function (item) {
return item + 1;
});
2.webpack
为啥要使用WebPack？
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的Javascript代码和一大堆依赖包，模快化工具就应运而生了，其中webpack 功能强大深受人们喜爱。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的Javascript文件。
·npm install webpack babel-loader --save-dev ·创建并配置 webpack.config.js//webpack.config.js文件与package.json同级 ·配置 package.json中的scripts ·运行 npm start
//配置 webpack.config.js 针对.js结尾的文件除了node_modules都用babel解析
module.exports = {
entry: './src/index.js',
output: {
path: __dirname,
filename: './build/bundle.js'
},
module: {
rules: [{
test: /.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader'
}]
}
}
//配置 package.json中的scripts
"scripts": {
"start": "webpack",
"test": "echo "Error: no test specified" && exit 1"
}
3.rollup
Rollup 是一个 Javascript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。通过它可以让你的 bundle 最小化，有效减少文件请求大小，与webpack不同的是，rollup功能单一，但没有冗余代码。既然这两者各有千秋，那我们应该如何选择？对于打包一个项目的整个应用的话，webpack更适合，对于类库的打包，使用 Rollup效率更高。
如何配置rollup？·npm init ·npm i rollup rollup-plugin-node-resolve rollup-plugin-babel babel-plugin-external-helpers babel-core babel-preset-latest --save-dev ·配置.babelrc//与src同级 ·配置rollup.config.js//与src同级 ·修改package.json的scripts ·运行npm start
//.babelrc文件中
{
"presets": [
["latest", {
"es2015": {
"modules": false
}
}]
],
"plugins": ["external-helpers", "babel-plugin-transform-regenerator"]
}
//配置rollup.config.js
import babel from 'rollup-plugin-babel'
import resolve from 'rollup-plugin-node-resolve'
export default {
entry: 'src/index.js',
format: 'umd',
plugins: [
resolve(),
babel({
exclude: 'node_modules
var basicNum = 0;
var add = function (a, b) {
return a + b;
};
export { basicNum, add };
import { basicNum, add } from './math';
function test(ele) {
ele.textContent = add(99 + basicNum);
}
如上例所示，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。
// export-default.js
export default function () {
console.log('foo');
}
上面代码是一个模块文件export-default.js，它的默认输出是一个函数。
其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。
// import-default.js import customName from './export-default'; customName(); // 'foo'
上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。
未完待续
To be continued...
