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>タグを使う
browserifyを使う

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を使う

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>