Question

我尝试使用Browserify和Gulp将已编译的js包文件保存到生产目录中但似乎Browserify无法找到输出目录的有效路径以下是代码段：

  browserify({ debug: true })
    .transform(babelify.configure({
      presets: ['es2015', 'react']
    }))
    .require('./client/client.js', { entry: true })
    .bundle()
    .on('error', (err) => {
      console.log(err);
    })
    .on('end', () => {
      console.timeEnd();
    })
    .pipe(gulp.dest('dist/public/bundle.js'));

我收到以下错误：

[19:37:57] Finished 'lint' after 14 s
path.js:7
    throw new TypeError('Path must be a string. Received ' + inspect(path));
    ^

TypeError: Path must be a string. Received undefined
    at assertPath (path.js:7:11)
    at Object.resolve (path.js:1148:7)
    at DestroyableTransform.saveFile [as _transform]

我尝试使用手动方式：

.pipe(fs.createWriteStream(`${__dirname}/dist/public/bundle.js`));

它不起作用。但下面的工作：

.pipe(fs.createWriteStream(`${__dirname}/dist/bundle.js`));

文件夹'dist'存在于目录中，但不存在于'dist'中的'public' 我认为这是原因，但我如何解决它将包文件保存到'dist / public'？

Answer 1

您的两次尝试因各种原因而失败。

使用gulp.dest()的第一次尝试失败，因为browserify()返回一个简单的字符流，而gulp.dest()只能处理vinyl个对象的流。您需要使用vinyl-source-stream模块将char流转换为vinyl流。之后gulp.dest()将起作用，并将创建任何尚不存在的文件夹：

var browserify = require('browserify');
var source = require('vinyl-source-stream');

browserify({ debug: true })
  .transform(babelify.configure({
    presets: ['es2015', 'react']
  }))
  .require('./client/client.js', { entry: true })
  .bundle()
  .on('error', (err) => {
    console.log(err);
  })
  .on('end', () => {
    console.timeEnd();
  })
  .pipe(source('bundle.js')) 
  .pipe(gulp.dest('dist/public/'));

您的第二次尝试仅使用字符串流，但失败，因为fs.createWriteStream()只能创建bundle.js文件本身，而不是任何必要的父目录。您必须事先手动执行此操作。我建议mkdirp模块以递归方式创建任意深度的目录结构（如果它们不存在）：

var browserify = require('browserify');
var mkdirp = require('mkdirp');
var fs = require('fs');

mkdirp('dist/public/', function(err) {
  if (err) { /* handle error somehow */ }

  browserify({ debug: true })
    .transform(babelify.configure({
      presets: ['es2015', 'react']
    }))
    .require('./client/client.js', { entry: true })
    .bundle()
    .on('error', (err) => {
      console.log(err);
    })
    .on('end', () => {
      console.timeEnd();
    })
    .pipe(fs.createWriteStream('dist/public/bundle.js'));
});

您选择的这两个解决方案中的哪一个取决于您，但如果这是您从gulpfile运行的代码，那么我建议您使用第一个。

如果Browserify不存在，如何使用Browserify创建新目录？

1 个答案: