Question

我正在尝试在浏览器上使用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。

Answer 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一起使用。

当使用gulp，gulp-babel和browserify时，如何修复`path必须是字符串`？

1 个答案: