babel筆記

.babelrc配置文件

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

• presets字段設(shè)定轉(zhuǎn)碼規(guī)則

  # 最新轉(zhuǎn)碼規(guī)則
  $ npm install --save-dev babel-preset-latest
  # react 轉(zhuǎn)碼規(guī)則
  $ npm install --save-dev babel-preset-react
  

• plugins字段設(shè)定babel的插件

  # 單獨(dú)引入箭頭函數(shù)
  "plugins": ["transform-es2015-arrow-functions"]
  

babel-core的作用

• 以編程的方式來使用Babel，如果某些代碼需要調(diào)用Babel的API進(jìn)行轉(zhuǎn)碼，就要使用babel-core模塊。

  var babel = require('babel-core');
  // 字符串轉(zhuǎn)碼
  babel.transform('code();', options);
  // => { code, map, ast }
  // 文件轉(zhuǎn)碼（異步）
  babel.transformFile('filename.js', options, function(err, result) {
    result; // => { code, map, ast }
  });
  // 文件轉(zhuǎn)碼（同步）
  babel.transformFileSync('filename.js', options);
  // => { code, map, ast }
  

babel-cli的作用

• babel-cli工具用于命令行轉(zhuǎn)碼。

  # 轉(zhuǎn)碼結(jié)果輸出到標(biāo)準(zhǔn)輸出
  $ babel example.js  
  # 轉(zhuǎn)碼結(jié)果寫入一個(gè)文件
  # --out-file 或 -o 參數(shù)指定輸出文件
  $ babel example.js --out-file compiled.js
  

babel-loader的作用

• babel加載器，在webpack中想使用babel就需要使用babel-loader,babel-loader會(huì)根據(jù).babelrc配置來會(huì)用不同的babel(如babel-preset-es2015,babel-preset-react,babel-preset-stage-0之類)

  //...
  {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
  }
  //...
  

babel-preset-es2015的作用

• babel-preset-es2015中包含了es6->es5所有

  //...
  {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
  }
  //...
  

babel-polyfill的作用

• Babel默認(rèn)只轉(zhuǎn)換新的JavaScript句法（syntax），而不轉(zhuǎn)換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對(duì)象，以及一些定義在全局對(duì)象上的方法（比如Object.assign）都不會(huì)轉(zhuǎn)碼。
  • $ npm install --save babel-polyfill

  //腳本頭部引入：
  import 'babel-polyfill';// 或者require('babel-polyfill');