Browserify компиляция по полным системным путям (используя watchify & gulp)

Question

Я прихожу из AMD и, похоже, уже что-то делаю не так.

Я сделал настройку, как это:

client/js/index.js (entry point)
client/js/test.js

Я хочу построить это для:

build/app.js

index.js требует в test.js как это:

var test = require('./test');

мой gulpwatchify задача выглядит так:

var gulp = require('gulp');
var gutil = require('gulp-util');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var watchify = require('watchify');

// https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md
gulp.task('watch', function () {
    var bundler = watchify(browserify('./client/js/index.js', watchify.args));

    bundler.on('update', rebundle);

    function rebundle () {
        return bundler.bundle()
            // Log errors if they happen.
            .on('error', function(e) {
                gutil.log('Browserify Error', e.message);
            })
            .pipe(source('app.js'))
            .pipe(gulp.dest('./build'));
    }

    return rebundle();
});

Скомпилированный код выглядит неправильно, хотя, для test.js Я вижу абсолютные локальные пути, которые наверняка либо сломаны, либо избыточны для тех, кто потребляет код?

PS Я запускаю задачу без аргументов (просто gulp watch)

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({"./client/js/index.js":[function(require,module,exports){
var test = require('./test');

var ab = function(a, b2) {
    return a + b2;
};

module.exports = ab;
},{"./test":"/Users/dtobias/Sites/browserify-test/client/js/test.js"}],"/Users/dtobias/Sites/browserify-test/client/js/test.js":[function(require,module,exports){
var helloworld = function () {
    console.log('hello world');
};

module.exports = helloworld;
},{}]},{},["./client/js/index.js"]);

Answer 1

watchify предназначен для наблюдения за изменением файлов и их автоматического обновления, он не предназначен для развертывания, пути, которые вы видите, являются результатом использования watchify.args на этой линии watchify(browserify('./client/js/index.js', watchify.args)); В аргументах, передаваемых для просмотра, говорится: fullPaths: true, что является частью того, как watchify может ускорить процесс сборки при каждом изменении файла. То, что я бы предложил сделать, - это задача watchify специально для просмотра и просмотра процесса сборки.

Это можно легко сделать, установив некоторый переключатель и установив его в значение true в задаче наблюдения (и, таким образом, изменив код).

Что-то вроде этого:

var gulp = require('gulp');
var gutil = require('gulp-util');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var watchify = require('watchify');

// https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md
gulp.task('build', function(){
    browserifyfun(false);
});
gulp.task('watch', function () {
    browserifyfun(true);
});
function browserifyfun(watch){
    var b;

    if(watch){
        b = watchify(browserify('./client/js/index.js', watchify.args));
        b.on('update', rebundle(b));
    }else{
        b = browserify('./client/js/index.js');
    }

    function rebundle (bundler) {
        return bundler.bundle()
            // Log errors if they happen.
            .on('error', function(e) {
                gutil.log('Browserify Error', e.message);
            })
            .pipe(source('app.js'))
            .pipe(gulp.dest('./build'));
    }

    return rebundle(b);
}

Модифицированный код отсюда