Babel 中文文档 Babel 中文文档
指南
GitHub (opens new window)
指南
GitHub (opens new window)
  • 指南
    • Babel 是什么?
    • 使用指南
    • 配置 Babel
    • 学习 ES2015
    • 升级到 Babel 7
  • 配置

  • 预设环境

  • 杂项

  • 集成

  • 工具

  • 辅助

This readme is for gulp-babel v8 + Babel v7 Check the 7.x branch for docs with Babel v6 usage


gulp-babel  


Use next generation JavaScript, today, with Babel


Issues with the output should be reported on the Babel issue tracker.

Install


Install gulp-babel if you want to get the pre-release of the next version of gulp-babel.

  1. ``` sh
  2. # Babel 7
  3. $ npm install --save-dev gulp-babel @babel/core @babel/preset-env

  4. # Babel 6
  5. $ npm install --save-dev gulp-babel@7 babel-core babel-preset-env

  6. ```

Usage


  1. ``` js
  2. const gulp = require('gulp');
  3. const babel = require('gulp-babel');

  4. gulp.task('default', () =>
  5. gulp.src('src/app.js')
  6.   .pipe(babel({
  7.    presets: ['@babel/preset-env']
  8.   }))
  9.   .pipe(gulp.dest('dist'))
  10. );
  11. ```

API


babel([options])


options


See the Babel options, except for sourceMaps and filename which is handled for you. Also, keep in mind that options will be loaded from config files that apply to each file.

Source Maps


Use gulp-sourcemaps like this:

  1. ``` js
  2. const gulp = require('gulp');
  3. const sourcemaps = require('gulp-sourcemaps');
  4. const babel = require('gulp-babel');
  5. const concat = require('gulp-concat');

  6. gulp.task('default', () =>
  7. gulp.src('src/**/*.js')
  8.   .pipe(sourcemaps.init())
  9.   .pipe(babel({
  10.    presets: ['@babel/preset-env']
  11.   }))
  12.   .pipe(concat('all.js'))
  13.   .pipe(sourcemaps.write('.'))
  14.   .pipe(gulp.dest('dist'))
  15. );
  16. ```

Babel Metadata


Files in the stream are annotated with a babel property, which contains the metadata from babel.transform().

Example


  1. ``` js
  2. const gulp = require('gulp');
  3. const babel = require('gulp-babel');
  4. const through = require('through2');

  5. function logBabelMetadata() {
  6. return through.obj((file, enc, cb) => {
  7.   console.log(file.babel.test); // 'metadata'
  8.   cb(null, file);
  9. });
  10. }

  11. gulp.task('default', () =>
  12. gulp.src('src/**/*.js')
  13.   .pipe(babel({
  14.    // plugin that sets some metadata
  15.    plugins: [{
  16.     post(file) {
  17.      file.metadata.test = 'metadata';
  18.     }
  19.    }]
  20.   }))
  21.   .pipe(logBabelMetadata())
  22. )
  23. ```

Runtime


If you're attempting to use features such as generators, you'll need to add transform-runtime as a plugin, to include the Babel runtime. Otherwise, you'll receive the error: regeneratorRuntime is not defined.

Install the runtime:

  1. ``` sh
  2. $ npm install --save-dev @babel/plugin-transform-runtime
  3. $ npm install --save @babel/runtime

  4. ```

Use it as plugin:

  1. ``` js
  2. const gulp = require('gulp');
  3. const babel = require('gulp-babel');

  4. gulp.task('default', () =>
  5. gulp.src('src/app.js')
  6.   .pipe(babel({
  7.    plugins: ['@babel/transform-runtime']
  8.   }))
  9.   .pipe(gulp.dest('dist'))
  10. );
  11. ```

License


MIT © Sindre Sorhus
Last Updated: 2023-09-03 17:10:52