使用 gulp、gulp-babel 和 browserify 时如何修复“路径必须是字符串”？答案

【问题标题】：How to fix `path must be a string` when using gulp, gulp-babel and browserify?使用 gulp、gulp-babel 和 browserify 时如何修复“路径必须是字符串”？
【发布时间】：2016-10-22 06:24:43
【问题描述】：

我正在尝试在我的浏览器上使用 ES2015，然后使用 gulp 将其转换为浏览器可以理解的内容。但是，在运行 gulp js 任务时，我得到了 path must be a string。

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。

【问题讨论】：

我不知道 gulp。但是消息说参数必须是字符串。不是 int、double 或数组。显示发生错误的行号。
Node 6 中添加了一个限制，因此如果您有一些较旧的依赖项，最好的办法是更新您的 package.json 以确保您的所有部门都是最新版本。

标签： gulp browserify babeljs

【解决方案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 一起使用。

【讨论】：