Блог

Главная - Вопросы по программированию - Как исправить `путь должен быть строкой` при использовании gulp, gulp-babel и browserify?

Как исправить `путь должен быть строкой` при использовании gulp, gulp-babel и browserify?

#gulp #browserify #babeljs

#gulp #browserify #babeljs

Вопрос:

Я пытаюсь использовать ES2015 в своем браузере, а затем использовать gulp для преобразования его во что-то, что браузеры могут понять. Тем не менее, я получаю сообщение path must be a string при выполнении gulp js задачи.

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

Полное сообщение об ошибке

 { 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)
    ...
}

Я пытался использовать babelify вместо gulp-babel , однако я не могу использовать gulp-uglify , поскольку я также получаю ошибку

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

Если это имеет значение, это то, что находится внутри моего main.js 

 import * as Render from './render';

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

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

и в моем `render.js

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

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

Кроме того, это не какой-то проект React. Я просто хочу использовать ES2015 во внешнем интерфейсе.

Комментарии:

1. Я не знаю о gulp. Но в сообщении говорилось, что параметр должен быть строкой. Не int, double или array. Покажите номер строки, в которой произошла ошибка.

2. В узле 6 было добавлено ограничение, поэтому, если у вас есть какие-то более старые зависимости, лучшим вариантом будет обновить ваш package.json , чтобы убедиться, что все ваши deps являются самыми последними версиями.

Ответ №1:

Ваша ошибка « path must be a string » связана с передачей функции в .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/'));
});

На всякий случай, babel-preset-es2015-node6 если вы не в курсе, это будет работать, только если ваш браузер поддерживает ES2015 изначально. Это также идеально подходит для использования с Gulp.