読者です 読者をやめる 読者になる 読者になる

DRYな備忘録

Don't Repeat Yourself.

webpackでnpmのbinつくっててfs.readFileSync is not a functionと言われる問題

tl;dr

webpack.config.jsに以下を追加

module.exports = {
  entry: './src/bin/main.js',
  output: {filename:'./bin/main.js'},
+ target: "node",
  module: {
    loaders: [

これだけで、ES6のほうでnodejsの標準モジュールをrequireしたとき以下のようにコンパイルされるようになる。

/* 1 */
/***/ function(module, exports) {

    module.exports = require("fs");

/***/ },

おわり。


以下ログなので読まなくていいです


問題1: Module not found: Error: Cannot resolve module ‘fs’

ES6でnpmの簡単なbinつくりたいなと思ってて、webpack通してES5にするわけだけど、ビルドしようと思ったら以下のように叱られる

ERROR in ./src/bin/main.js
Module not found: Error: Cannot resolve module 'fs' in /Users/otiai10/proj/js/npmfine/src/bin
 @ ./src/bin/main.js 6:9-22

ES6のほうで、require('fs')してるんだけど、まあ無いよね、ってなる。

調査

モックを足せばいいのかな、って思って以下をwebpack.configに足す

  node: {
    fs: "empty",
  }

問題2: fs.readFileSync is not a function

ビルドは通るようになるんだけど、使用側でこうなる。ビルド成果物を見るとこうなってる。

   var fs = __webpack_require__(3);
/* 3 */
/***/ function(module, exports) {

    "use strict";

/***/ }

うーん、これはemptyだ。

調査

“node”: Compile for usage in a node.js-like environment (use require to load chunks)

nodejsで使われる用のrequireをするよ、と。

結論

単にwebpack.config.jsにtarget: "node"を足せばよかっただけ

DRY

JavaScript フレームワーク入門

JavaScript フレームワーク入門