Wie zu beheben `Pfad muss eine Zeichenfolge sein ', wenn Sie Schluck, Schluck-Babel und browserifizieren?

Question

Ich versuche, ES2015 in meinem Browser zu verwenden und benutze dann gulp, um es in etwas zu konvertieren, das Browser verstehen können. Ich bekomme jedoch eine path must be a string, wenn gulp js Aufgabe ausgeführt wird.

gulpfile.babel.js

import Browserify from 'browserify'; 
import Gulp from 'gulp'; 
import Babel from 'gulp-babel'; 
import Buffer from 'vinyl-buffer'; 
import Source from 'vinyl-source-stream'; 
import Uglify from 'gulp-uglify'; 

Gulp.task('js',() => { 
    Browserify({ 
     entries: 'public/scripts/Main.js', 
     debug: true 
    }).transform(Babel({ 
      presets: ['es2015-node6'] 
     })) 
     .bundle() 
     .on('error', error => console.error(error)) 
     .pipe(Source('main.min.js')) 
     .pipe(Buffer()) 
     .pipe(Uglify()) 
     .pipe(Gulp.dest('dist/scripts/')); 
}); 

komplette Fehlermeldung

{ Error: path must be a string 
    at /Users/user/Documents/test/node_modules/resolve/lib/async.js:16:16 
    at _combinedTickCallback (internal/process/next_tick.js:67:7) 
    at process._tickCallback (internal/process/next_tick.js:98:9) 
    ... 
} 

ich versucht habe, mit babelify statt gulp-babel, aber ich nicht gulp-uglify verwenden kann, wie ich auch einen Fehler

message: 'SyntaxError: Unexpected token: punc()) 

bin immer Wenn es darauf ankommt Das ist das, was in meinem ist main.js

import * as Render from './render'; 

(() => { 
    function init() { 
     console.log('here'); 
    } 

    window.addEventListener('load',() => { 
     if (document.readyState === 'complete') { 
      init(); 
     } 
    }); 
})(); 

und in meinem `render.js

export function Render() { 
    console.log('Render'); 
}; 

export function RenderPosts() { 
    console.log('RenderPosts'); 
} 

Auch dies ist nicht irgendein Projekt React. Ich möchte nur ES2015 am Front-End verwenden.

Answer 1

Ihr "path must be a string" Fehler ist wegen der Übergabe einer Funktion an .transform.

import Browserify from 'browserify'; 
import Gulp from 'gulp'; 
import Babel from 'gulp-babel'; 
import Buffer from 'vinyl-buffer'; 
import Source from 'vinyl-source-stream'; 
import Uglify from 'gulp-uglify'; 

Gulp.task('js',() => { 
    Browserify({ 
     entries: 'public/scripts/Main.js', 
     debug: true 
    }).transform('babelify', { 
      presets: ['es2015-node6'] 
     }) 
     .bundle() 
     .on('error', error => console.error(error)) 
     .pipe(Source('main.min.js')) 
     .pipe(Buffer()) 
     .pipe(Uglify()) 
     .pipe(Gulp.dest('dist/scripts/')); 
}); 

Nur falls Sie sich nicht bewusst sind, babel-preset-es2015-node6 wird nur funktionieren, wenn Ihr Browser nativ ES2015 unterstützt. Es ist auch perfekt für den Einsatz mit Gulp.