Babel核心用法记要

Babel一句话介绍

---

一个js编译器，把浏览器不支持的js转译成浏览器支持的js

安装Babel

---

不建议把Babel安装到全局，建议安装到项目的devDependencies里

npm i -D babel-cli

.babelrc文件

---

建议用.babelrc来配置babel

{  "presets": [],  "plugins": []}

一般会用到的两个套件react，es2015

安装babel-preset-es2015和babel-preset-react

npm i -D babel-preset-es2015 babel-preset-react

配置.babelrc文件

{  "presets": [      "es2015",      "react"  ],  "plugins": []}

CLI用法

---

配置.babelrc文件

{  "presets": [      // 需要用到的套件  ],  "plugins": [      // 需要用到的插件  ]}

转译文件到文件

babel example.js -o compiled.js

转译目录到目录

babel src -d dist

监听文件变化

babel -w src -d dist

Webpack用法

---

1. 安装babel-loader

    npm i -D babel-loader babel-core

2. 配置loader

    module: {   loaders: [{       test: /\.js$/,       exclude: /node_modules/,       loader: "babel-loader"   }] }

3. 配置.babelrc文件

    {   "presets": [       // 需要用到的套件   ],   "plugins": [       // 需要用到的插件   ] }

注意：要配置好.babelrc文件

Gulp用法

---

1. 安装gulp-babel

    npm i -D gulp-babel

2. 定义task

    var gulp = require("gulp"); var babel = require("gulp-babel"); gulp.task("default", function () {   return gulp.src("src/app.js")     .pipe(babel())     .pipe(gulp.dest("dist")); });

3. 配置.babelrc文件

    {   "presets": [       // 需要用到的套件   ],   "plugins": [       // 需要用到的插件   ] }

Babel套件与插件

---

babel-preset-es2015

适用于ES6的套件

npm i -D babel-preset-es2015

.babelrc

{    "presets": ["es2015"]}

babel-preset-react

适用于React的套件

npm install --save-dev babel-preset-react

.babelrc

{    "presets": ["react"]}

object-assign

适用于Object.assign()

举例

var obj = { a: 1 };var copy = Object.assign({}, obj);console.log(copy); // { a: 1 }

安装

npm install babel-plugin-transform-object-assign

.babelrc

{  "plugins": ["transform-object-assign"]}

object-rest-spread

适用于展开运算符

举例

var arr1 = [0, 1, 2];var arr2 = [3, 4, 5];arr1.push(...arr2);

安装

npm install babel-plugin-transform-object-rest-spread

.babelrc

{  "plugins": ["transform-object-rest-spread"]}