如果使用Browserify，如何创建一个新的文件夹（目录），如果该文件夹不存在？

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'中呢？

- Colin Wang

Answer 1

您有两个尝试都失败了，原因不同。

您第一次尝试使用gulp.dest()失败了，因为browserify()返回一个简单的字符流，而gulp.dest()只能处理vinyl对象的流。您需要使用vinyl-source-stream模块将字符流转换为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运行的代码，则建议您使用第一种解决方案。

- Sven Schoenung