babel是什么
babel是babel是一个 javascript 转译器。为什么会有babel存在呢?原因是 javascript 在不断的发展,但是浏览器的发展速度跟不上。以es6为例,es6中为 javascript 增加了箭头函数、块级作用域等新的语法和Symbol、Promise等新的数据类型,但是这些语法和数据类型并不能够马上被现在的浏览器全部支持,为了能在现有的浏览器上使用js新的语法和新的数据类型,就需要使用一个转译器,将javascript中新增的特性转为现代浏览器能理解的形式。babel就是做这个方面的转化工作。
babel转译插件及转译器
转译插件是用来转译单一功能的插件,而转译器就是一系列转译插件的集合。
常用的有:
- 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插件。 - babel-preset-es2015 / babel-preset-react
- 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常见的配置选项
- env
类型:{ [envKey: string]: Options }
用于配置代码需要兼容的环境 - plugins
类型:Array<PluginEntry | Plugin>
配置转译所需要的插件。使用插件的顺序是按照插件在数组中的顺序依次调用的 - 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"]
}
}
}