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

require is not definedを解消してrequireを使えるようにする

参考: javascript - Client on node: Uncaught ReferenceError: require is not defined - Stack Overflow

Uncaught ReferenceError: require is not defined

nodeのモジュールをvar foo = require('foo');で読み込ませたい…

しかしブラウザで確認すると、こんなエラーが出てしまう。

Uncaught ReferenceError: require is not defined

理由は、ブラウザー/クライアントサイドのJavaScriptではrequireは使えないことにあります。

学習コストの低そうな解決法としては以下の二つ。

scriptタグを使う

例えばReact.jsを使いたいなら、index.html<script>タグを次のように編集すれば、使えるようになります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel" src="javascripts/main.js"></script>
  </body>
</html>

この場合main.jsでは、次のようにReactを使うことができます。

class Hello extends React.Component {
  render() {
    return (
      <div>Hello, React.js</div>
    );
  }
}
ReactDOM.render(
  <Hello />,
  document.getElementById('content')
);

browserifyを使う

https://camo.githubusercontent.com/85bbf6097b0237b921ef2bb232c2dc807604e865/687474703a2f2f737562737461636b2e6e65742f696d616765732f62726f777365726966792f62726f777365726966792e706e67

Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

Browserify

依存関係をまとめ上げることで、ブラウザーでもrequireが使えるようになるとのこと。 早速使っていきます。

main.jsファイルとindex.htmlファイルを次のように編集します。

var unique = require('uniq');

var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];

console.log(unique(data));
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Brouserify</title>
  </head>
  <body>
    <script src="./main.js"></script>
  </body>
</html>

もちろんindex.htmlファイルを開いても動きません。 なので依存モジュールをインストールします。

npm install uniq

まだこのままではrequireは使えません。 browserifyを使ってみます。

browserify main.js -o bundle.js

bundle.jsファイルがルートディレクトリにできました。 このファイルをindex.htmlから読み込ませるようにしましょう。

<script src="bundle.js"></script>

これでrequireが使えるようになりました。

変更する度にいちいちコマンドラインからbrowserifyを打つのはどう考えても人間様の仕事ではないので、gulpのようなビルドツールに組み込んだ方が良さそうですね。

次:Gulp + Browserify

Gulp + Browserify: The Everything Post | Viget

※追記:
GulpとBrowserifyを組み込んでみました。これでとりあえず問題は解消します。

uraway.hatenablog.com