babel官网正中间一行黄色大字写着“babel is a javascript compiler”，翻译一下就是babel是一个javascript转译器。为什么会有babel存在呢？原因是javascript在不断的发展，但是浏览器的发展速度跟不上。以es6为例，es6中为javascript增加了箭头函数、块级作用域等新的语法和Symbol、Promise等新的数据类型，但是这些语法和数据类型并不能够马上被现在的浏览器全部支持，为了能在现有的浏览器上使用js新的语法和新的数据类型，就需要使用一个转译器，将javascript中新增的特性转为现代浏览器能理解的形式。babel就是做这个方面的转化工作。
配置Babel的全过程：
（事先安装了node环境）
npm install --save-dev @babel/core @babel/cli @babel/preset-envnpm install --save @babel/polyfill- 配置babel.config.js
(这是官网给出的配置，后续还可以根据自己的需求配置)
const presets = [
["@babel/env", {
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1"
},
useBuiltIns: "usage"
}]
];
module.exports = { presets };
babel配置完成，运行指令：npx babel src --out-dir lib
前面没有提到，在目标目录下创建src目录用于存放ES6代码。
上面的指令会将src下的内容编译到lib目录下。如果觉得命令繁琐可以在package.json的scripts项里自定义一条npm指令
- 为编译箭头函数下载一个插件@babel/plugin-transform-arrow-functions
npm install --save-dev @babel/plugin-transform-arrow-functions
为了完成各种各样语法的编译，后续可能还会下载更多的plugin，比如：
- 要将箭头函数编译成普通函数需要使用@babel/plugin-transform-arrow-functions
- 要将const或者let变量编译成var变量需要@babel/plugin-transform-block-scoping
- 要将class关键字转化成传统基于原型的类需要@babel/plugin-transform-classes
Babel的plugin的文档<----这里是详细的文档
编译，运行指令：npx babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions
(同上，如果觉得命令繁琐可以在package.json的scripts项里自定义一条npm指令)
- 由于Babel对模块化的支持不太好，需要借助webpack
npm i -D webpack babel-loader(webpack4还要下载webpack-cli) - 配置webpack.config.js
// 这只是简易的webpack.config.js配置
module.exports = {
entry: './src/index.js',
output: {
path: __dirname,
filename: './build/bundle.js',
},
module: {
rules: [{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader'
}]
}
}
- webpack4 运行的时候一定要加后缀，不然报WARNING
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to ena
ble defaults for each environment.
webpack --mode development开发模式
webpack --mode production生产模式
参考文章：babel 7 的使用的个人理解
