ES6核心特性(一)

ES6 虽提供了许多新特性，但我们实际工作中用到频率较高并不多，根据二八法则，我们应该用百分之八十的精力和时间，好好专研这百分之二十核心特性，将会收到事半功倍的奇效。接下来将会三篇文章着重介绍这些核心特性。

如果你想了解解构赋值，箭头函数以及展开运算符，请猛戳 ES6核心特性（二）

这部分着重介绍：babel 编译ES6语法，如何用webpack和rollup实现模块化。

ES6 提供了许多新特性，但并不是所有的浏览器都能够完美支持。下图是各个浏览器对ES6兼容性一览表(以export为例)

export各个浏览器兼容性一览表

由上图可知，有些浏览器对于ES6并不是很友好，针对 ES6 的兼容性问题，很多团队为此开发出了多种语法解析转换工具(比如babel，jsx，traceur 等)，可以把我们写的 ES6 语法转换成 ES5，相当于在 ES6 和浏览器之间做了一个翻译官。其中Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

·首先要先安装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;
});

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的Javascript代码和一大堆依赖包，模快化工具就应运而生了，其中webpack 功能强大深受人们喜爱。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的Javascript文件。

image

·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"
  }

Rollup 是一个 Javascript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。通过它可以让你的 bundle 最小化，有效减少文件请求大小，与webpack不同的是，rollup功能单一，但没有冗余代码。既然这两者各有千秋，那我们应该如何选择？对于打包一个项目的整个应用的话，webpack更适合，对于类库的打包，使用 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.jsimport 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_modulesvar 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.jsexport default function () {  console.log('foo');
}

上面代码是一个模块文件export-default.js，它的默认输出是一个函数。
其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

// import-default.jsimport customName from './export-default';
customName(); // 'foo'

上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。

未完待续
To be continued...

作者：浪里行舟
链接：https://www.jianshu.com/p/9c480936976f