Javascriptのrequireを使う方法

やりたいこと

store.jsを使って、localStorageを使った機能を実装したいのですが、var store = require('store');とするとUncaught ReferenceError: require is not definedエラーになってしまいます。

node.jsは使わずにrequireをつかってstore.jsを読み込むことは可能でしょうか？

サンプルコード

ファイル構成
- index.html
- index.js
- store.js/

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./index.js" charset="utf-8">
  </script>
</head>
<body>

</body>
</html>

index.js

var store = require('store');

store.set('user', 'user');

行動規範の内容に同意します

回答2件

ベストアンサー

ブラウザが搭載しているJavaScriptにはrequireという関数は存在しません。

Node.jsの誕生秘話的な話として、JSをサーバーサイドで使いたいけど他のファイル読めないじゃん！
しょうがないからC++でrequire機能を実装して、実行した時にグローバル領域に設置しておこう。
これがNode.jsでrequireが使える理由です。

無理やりこの概念をもってくるBrowserifyやWebpackというツールはありますが、
store.jsではどうやら違う解決方法を取っているようです。

Using script tag (first download one of the builds):

HTML
1

<script src="path/to/my/store.legacy.min.js"></script> <script> var store = require('store') store.set('user', { name:'Marcus' }) store.get('user').name == 'Marcus' </script>


どうも使い方の欄を見たところ、
`<script src="path/to/my/store.legacy.min.js"></script>`というタグを上で読み込んでおくと、
require関数が有効になり、使用可能になるみたいですね。

投稿2017/10/18 02:36

miyabi-sun

総合スコア21194

kenny_sayama

2017/10/18 02:38

素直に従えばよかったのですね！ありがとうございます！

行動規範の内容に同意します

requireはブラウザに実装されていないため、Browserifyなどで変換するか、store.everything.min.jsをスクリプトタグで読み込んでしまうかどちらかでは。

【require()とは何か？何が便利なのか - Qiita】
https://qiita.com/uryyyyyyy/items/b10b012703b5396ded5a

【旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section2 ～CommonJSモジュールと仲良くなろう～ - Qiita】
https://qiita.com/gaogao_9/items/190f4b52d6876f0b8d8a#browserify%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%8B

【ブラウザのローカルストレージにデータを保存する「Store.js」 | ある蜜柑の上にアルミ缶】
https://s8a.jp/javascript-store-js#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

投稿2017/10/18 02:41