如果不存在，如何使用 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' 存在于目录中，但 'public' 不存在于 'dist'.
目录中我认为这是原因，但我该如何解决它以将捆绑文件保存到 'dist/public'？

Answer 1

您的两次尝试因不同原因而失败。

您第一次尝试使用 gulp.dest() 失败，因为 browserify() returns 是一个简单的字符流，而 gulp.dest() 只能在 vinyl objects. You need to use the 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() can only create the bundle.js file itself, not any of the necessary parent directories. You'll have to do that manually beforehand. I suggest the 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 创建新目录？

How to create a new directory with Browserify if it does not exist?

node.js

browserify

ecmascript-6

reactjs

gulp