使用Babel兼容ES6新特性

一、问题背景

ES5项目中需要使用ES6的一些新特性时，需要对代码做额外处理，才能使得浏览器正常运行代码。

假设有这样一种场景，我需要在项目中使用import/export引入导出一个模块的时候，运行可能会报以下错误：

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

原因是引入ES6的一些关键词的时候，出现不兼容的现象。那么为了处理这个问题，通常做法是将ES6代码转换为ES5代码，可以借助Babel(以前叫6to5)、Trancer等库进行转换。比较常用的是Babel。

二、Babel解决方案

关于上面提到的import错误的问题，网上也有很多教程是如何安装配置Babel解决问题的。但是可能大多数教程用的是babel@6，但Babel已经升级了一个大版本至babel@7了，所以仍旧使用babel@6版本问题可能解决不了，还额外新增一些错误。另外，特别注意的是babel的6、7版本不能混合使用！！！作为一个刚接触babel的小白，差点没被坑死，所以大家还是当看到引入使用某个库解决问题的时候，还是花点时间了解一下新的动态，避免多走弯路。

以上都是题外话。以下说一下如何在项目中安装配置babel@7。

首先安装以下依赖，babel@7中的core、preset、plugin等工具类安装都需要加上“@babel/”的前缀。preset安装env就可以了，env中兼容了es2015、es2016等，所以可以省略安装es2015、stage-0。

npm install --save-dev babelify
npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env
npm install --save-dev @babel/plugin-transform-runtime

接着配置.babelrc文件。如果没有，就在项目的根目录下新建一个。配置如下：

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        "@babel/plugin-transform-runtime"
    ]
}

在第7版中，注意preset、plugin引入使用的时候要与安装名一致。

然后，我的项目是使用browserify的，所以还需要在package.json中配置以下选项：

"browserify": {
    "transform": [
      [
        "babelify"
      ]
    ]
}

完成以上三个步骤，不出意外的话就可以解决ES6兼容的问题了。但是web技术日新月异，未来解决方案也能会产生变动，所以以上仅供参考。