Browserify と fs モジュール

Electron で Watchify(Browserify)使ってると、fs モジュールが使えないという現象にあたった。

今遊んでいる環境が、Gulp で babel と wathify で Electron なアプリケーションを差分コンパイルしながらのため、brfs を使えばいけるとか、ググったら色々でてくるが、gulp で brfs を transform に入れてもだめだった。

const fs = window.require('fs');

とかだと行けた。

が、window とかつけなくても Electron で Babel を使った Markdown なアプリケーションとかあるので、絶対いけるはずと、ググったら、node-webkitでもbrowserify使いたいしnodeのrequireも使いたい - Qiita がヒットした。

gulp.task('compile:js', $.watchify((watchify) => {
  var b = watchify({
    watch: watching,
    verbose: true,
    debug: true,
    ignoreMissing: true,     // これ
    detectGlobals: false,     // これ
    bare: true,
    transform: ['babelify', 'envify'],
    builtins: [],                   // これ
  });

  ['boot.js'].forEach((f) => {
    gulp.src(SRC_DIR + f)
      .pipe($.plumber())
      .pipe(b)
      .pipe(buffer())
      .pipe($.sourcemaps.init({ loadMaps: true }))
      .pipe($.if(DEBUG, $.uglify({ compress: true })))
      .pipe($.if(DEBUG, $.sourcemaps.write()))
      .pipe(gulp.dest(DIST_DIR));
  });
}));

上記のように watchify の定義の順番を変えてやればいけた。

なお環境は

    "babel-core": "^6.5.2",
    "babel-plugin-react-transform": "^2.0.0",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.2.0",
    "electron-prebuilt": "^0.36.9",
    "watchify": "^3.7.0"

な環境。