咕嘟+ babelify + browserify问题 [英] Gulp + babelify + browserify issue

问题描述

我正在尝试创建带有浏览器和babelify的吞咽任务。这是任务：

  var gulp = require（'gulp'）; 
 var browserify = require（'gulp-browserify'）; 
 var source = require（'vinyl-source-stream'）; 
 var babelify = require（'babelify'）; 
 
 gulp.task（'js'，function（）{
 browserify（'./ resources / js / *。js'）
 .transform（babelify）
 .bundle（）
 .pipe（source（'*。js'））
 .pipe（gulp.dest（'./ public / js'））; 
}）; 
  

我发现了一些示例代码，试图使用它们，但结果始终如此。 / p>

当我运行任务并保存我的example.js文件时，会发生以下错误：

TypeError：browserify（...）。transform不是函数

我做错了什么？

解决方案

您正在为 browserify 和 gulp-browserify 。

从

  var gulp = require（'gulp'）
 var browserify = require（'gulp-browserify'）
 
 gulp.task（'js'，function（）{
 gulp.src（' ./resources/js/*.js'）
.pipe（browserify（{
 transform：['babelify']，
}））
 .pipe（gulp.dest （'./public/js'））
}）; 
  

---

编辑：自这个问题首先得到解答， gulp-browserify已经被放弃了，并且gulp已经发展了很多。如果你想用新版本的gulp实现同样的功能，你可以按照gulp团队提供的指南。

你最终会得到如下结果：

  var browserify = require（'browserify'）; 
 var babelify = require（'babelify'）; 
 var gulp = require（'gulp'）; 
 var source = require（'vinyl-source-stream'）; 
 var buffer = require（'vinyl-buffer'）; 
 var sourcemaps = require（'gulp-sourcemaps'）; 
 var util = require（'gulp-util'）; 
 
 gulp.task（'default'，function（）{
 var b = browserify（{
 entries：'./resources/test.js'，
 debug：true，
 transform：[babelify.configure（{
 presets：['es2015'] 
}）] 
}）; 
 
 return b.bundle（）
 .pipe（source（'./ resources / test.js'））
 .pipe（buffer（））
 .pipe（sourcemaps.init（{loadMaps： true）））
 //将其他gulp转换（例如uglify）添加到这里的管道中。
 .on（'error'，util.log）
 .pipe（sourcemaps.write './'））
 .pipe（gulp.dest（'./ public / js /'））; 
}）; 
  

I'm trying to create a gulp task with browserify and babelify. Here is the task:

var gulp = require('gulp');
var browserify = require('gulp-browserify');
var source = require('vinyl-source-stream');
var babelify = require('babelify');

gulp.task('js', function () {
    browserify('./resources/js/*.js')
        .transform(babelify)
        .bundle()
        .pipe(source('*.js'))
        .pipe(gulp.dest('./public/js'));
});

I found a few sample code, tried to use them, but the result was always the same.

When i run the task, and save my example.js file, the following error occurs:

TypeError: browserify(...).transform is not a function

What am I doing wrong?

解决方案

You're mixing up the API for browserify and gulp-browserify.

From the gulp-browserify docs, you'll want to do something like this:

var gulp = require('gulp')
var browserify = require('gulp-browserify')

gulp.task('js', function () {
  gulp.src('./resources/js/*.js')
    .pipe(browserify({
      transform: ['babelify'],
    }))
    .pipe(gulp.dest('./public/js'))
});

---

EDIT: Since this question was first answered, gulp-browserify has been abandoned and gulp has evolved a great deal. If you'd like to achieve the same thing with a newer version of gulp, you can follow the guides provided by the gulp team.

You'll end up with something like the following:

var browserify = require('browserify');
var babelify = require('babelify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');
var util = require('gulp-util');

gulp.task('default', function () {
  var b = browserify({
    entries: './resources/test.js',
    debug: true,
    transform: [babelify.configure({
      presets: ['es2015']
    })]
  });

  return b.bundle()
    .pipe(source('./resources/test.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
      // Add other gulp transformations (eg. uglify) to the pipeline here.
      .on('error', util.log)
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./public/js/'));
});

这篇关于咕嘟+ babelify + browserify问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！