ogarich89
@ogarich89
Front-End Developer

Как подружить babelify и browserify-shim?

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var uglify      = require('gulp-uglify');
var useref      = require('gulp-useref');
var rename      = require('gulp-rename');
var browserify  = require('browserify');
var babelify    = require('babelify');
var buffer = require('vinyl-buffer');
var source = require('vinyl-source-stream');
var sourcemaps = require('gulp-sourcemaps');

// use default task to launch Browsersync and watch JS files
gulp.task('serve', ['js'], function () {

	// Serve files from the root of this project
	browserSync.init({
		proxy: "soulsell"
	});

	// add browserSync.reload to the tasks array to make
	// all browsers reload after tasks are complete.
	gulp.watch("src/*.js", ['js']);
	gulp.watch("*.html").on("change", browserSync.reload);
	gulp.watch("dist/*.js").on("change", browserSync.reload);
	gulp.watch("ssi/*.shtml").on("change", browserSync.reload);
	gulp.watch("css/*.css").on("change", browserSync.reload);
});

// process JS files and return the stream.
gulp.task('js', function () {
	var bundler = browserify({
		entries: 'src/main.js',
		debug: true
	});

	bundler
	.transform(babelify, {
		presets: ['es2015'],
		global: true,
		compact: false
	})
	.transform('browserify-shim', {
		global: true,
		compact: false		
	})

	bundler.bundle()
		.on('error', function (err) { console.error(err); })
		.pipe(source('main.js'))
		.pipe(buffer())
		.pipe(sourcemaps.init({ loadMaps: true }))
		.pipe(uglify())
		.pipe(sourcemaps.write('./'))
		.pipe(rename({suffix: '.min'}))
		.pipe(gulp.dest('dist'))
		.pipe(browserSync.stream());
});
// create a task that ensures the `js` task is complete before
// reloading browsers
gulp.task('default', ['serve']);
  • Вопрос задан
  • 304 просмотра
Пригласить эксперта
Ответы на вопрос 1
@ViieeS
Поскольку у меня старый проект, я использую для исходников с новой спецификацией расширение .es6.
секция в package.json
"browserify": {
    "transform": [
      "browserify-shim", [
        "babelify", {
          "presets": ["env"],
          "extensions": [".es6"]
        }
      ]
    ]
  },


секция в gulp task
var bundler = browserify(paths.js, {
                        fullPaths: true,
                        extensions: [".es6"]
                    }).bundle();
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы