如果 Browserify 不存在，如何创建一个新目录？答案

【问题标题】：How to create a new directory with Browserify if it does not exist?如果 Browserify 不存在，如何创建一个新目录？
【发布时间】：2017-01-09 17:25:03
【问题描述】：

我尝试使用 Browserify 和 Gulp 将已编译的 js 包文件保存到生产目录。
但似乎 Browserify 找不到输出目录的有效路径。
下面是代码sn-p：

  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”？

【问题讨论】：

标签： node.js reactjs gulp ecmascript-6 browserify

【解决方案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/'));

您的第二次尝试仅使用 char 流，但失败了，因为 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 运行的代码，那么我建议您使用第一种。

【讨论】：