Babel核心用法记要

Babel一句话介绍


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

安装Babel


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

npm i -D babel-cli

.babelrc文件


建议用.babelrc来配置babel

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

一般会用到的两个套件reactes2015

安装babel-preset-es2015babel-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"]
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值