有关babel的一些学习

babel是什么

babel是babel是一个 javascript 转译器。为什么会有babel存在呢？原因是 javascript 在不断的发展，但是浏览器的发展速度跟不上。以es6为例，es6中为 javascript 增加了箭头函数、块级作用域等新的语法和Symbol、Promise等新的数据类型，但是这些语法和数据类型并不能够马上被现在的浏览器全部支持，为了能在现有的浏览器上使用js新的语法和新的数据类型，就需要使用一个转译器，将javascript中新增的特性转为现代浏览器能理解的形式。babel就是做这个方面的转化工作。

babel转译插件及转译器

转译插件是用来转译单一功能的插件，而转译器就是一系列转译插件的集合。
常用的有：

1. js制作规范有四个阶段，针对js规范的不同阶段，babel也提供了对应的转译器：
   Stage0：preset-stage-0
   Stage1：preset-stage-1
   Stage2：preset-stage-2
   Stage3：preset-stage-3
   不同阶段的转译器之间是包含的关系，preset-stage-0转译器除了包含了preset-stage-1的所有功能还增加了transform-do-expressions插件和transform-function-bind插件。
2. babel-preset-es2015 / babel-preset-react
3. babel-plugin-module-resolver解析插件
   在.babelrc中可以配置模块的导入搜索路径. 为模块添加一个新的解析器。这个插件允许你添加新的“根”目录，这些目录包含你的模块。它还允许您设置一个自定义别名目录，具体的文件，甚至其他NPM模块。 安装配置后默认以项目根为模块的搜索路径，也可以使用别名，而不是在项目中使用相对路径。例：

   //.babelrc文件配置
   "plugins": [
       ["module-resolver", {
         "root": ["./src"],  // 指定路径或全局路径
         "alias": {  // 别名的配置。也可以别名node_modules依赖关系，而不仅仅是本地文件
           "utils": "./src/utils"
         }
       }]
     ],
    /* 其他文件引入utils里的myFun是
     	import myFun from 'utils'
    	 而不是 import myFun from '../../utils' */
   

babel常见的配置选项

1. env
   类型：{ [envKey: string]: Options }
   用于配置代码需要兼容的环境
2. plugins
   类型：Array<PluginEntry | Plugin>
   配置转译所需要的插件。使用插件的顺序是按照插件在数组中的顺序依次调用的
3. presets
   类型：Array<PresetEntry>
   配置你要使用的转译器。使用转译器的顺序是按照转译器在数组中的反顺序进行调用的。先使用数组最末尾的转译器，然后使用倒数第2个，倒数第3个，依次类推

一个项目中的配置

{
  "presets": ["react", "env", "stage-0"],
  "plugins": [
    "transform-class-properties",
    "lazy-dynamic-import-webpack",
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "assets": "./src/assets",
        "components": "./src/components",
        "config": "./src/config",
        "models": "./src/models",
        "routes": "./src/routes",
        "services": "./src/services",
        "utils": "./src/utils"
      }
    }]
  ],
  "env": {
    "development": {
      "plugins": ["dva-hmr"],
      "presets": ["react-hmre"]
    },
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}