問題描述

我正在嘗試使用 browserify 和 babelify 創建一個 gulp 任務.這是任務:

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.

當我運行任務并保存我的 example.js 文件時，出現以下錯誤:

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

TypeError: browserify(...).transform 不是函數

我做錯了什么?

推薦答案

你混淆了 browserify 和 gulp-browserify 的 API.

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

從 gulp-browserify docs，您需要執行以下操作:

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'))
});

<小時>

自從第一次回答這個問題以來，gulp-browserify 已被放棄 并且 gulp 已經發展了很多.如果您想使用更新版本的 gulp 實現相同的功能，您可以 遵循 gulp 團隊提供的指南.

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/'));
});

這篇關于Gulp + babelify + browserify 問題的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！