質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1791閲覧

フロントエンドのjavascriptでnode.jsのモジュールをrequireしたい

mote

総合スコア128

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/12/08 13:11

以下のコードのように
htmlからフォーム送信する内容に公開鍵暗号を設定しようと思い
node.jsで公開鍵をつける関数を作り
module.exportsしています。

その自作したモジュールをフロントエンドで使いたいと思い
browselifyをnpmからインストールし
$ browselify crypt.js > bundle.js
としてディレクトリ内にbundle.jsが作成されました。

これでフロントエンドでrequireが使えると思ったら
Uncaught ReferenceError: require is not defined

というエラーがクライアントコンソールに出てしまいます。

ネットに書いてある通り<script src="bundle.js"></script>
としているので、何がダメなのか分かりません。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>socket.io</title> 6</head> 7<body> 8 <h1>ログイン画面</h1> 9 <h2>名前とパスワードを入力してください</h2> 10 <form name="myid"> 11 <input type="text" name="name"> 12 <input type="number" name="password"> 13 <input type="submit" value="送信"> 14 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 15 </script> 16 17 <script src="http://localhost:3000/socket.io/socket.io.js"></script> 18 19<script src="bundle.js"></script> 20<script> 21 let cryp = require("crypt") ; 22 let name = $(`input[name="name"]`).val() ; 23 let pass = $(`input[name="password"]`).val() ; 24 let cryp_name = cryp.cip(name) ; 25 let cryp_pass = cryp.cip(pass) ; 26 27 let socket = io.connect(); 28 $(`form[name="myid"]`).submit(function(e){ 29 console.log("c:"+cryp_name) ; 30 socket.emit("emit_data",{ 31 name : cryp_name, 32 password : cryp_pass 33 }); 34 e.preventDefault(); 35}) ; 36 </script> 37 </body> 38 </html> 39

↓crypt.js

js

1let crypto = require("crypto"); 2 3 //let text="aiueo"; 4 let key="key" ; 5// 暗号化するテキスト text 6// 暗号化キー pass 7 8let cip = function(text){ 9 // 暗号化 10 let cipher = crypto.createCipher("aes192", key) ; 11 cipher.update(text, "utf8", "hex") ; 12 let cipheredText = cipher.final("hex") ; 13 14 console.log("暗号化(AES192) :") ; 15 console.log(cipheredText) ; 16 return cipheredText ; 17} 18 19let decip = function(text){ 20 // 復号 21 let decipher = crypto.createDecipher("aes192", key) ; 22 decipher.update(text, "hex", "utf8") ; 23 let deciphered = decipher.final("utf8") ; 24 25 console.log("復号化(AES192) : ") ; 26 console.log(decipherd) ; 27 return deciphered ; 28} 29 30let cryp= function(text){ 31 cip(text) ; 32 decip(text) ; 33} 34module.exports = cryp ; 35

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

html

1<script> 2 let cryp = require("crypt") ;

Browserifyを通さない、HTMLに直接書くJavaScriptにrequireは使えません。あくまで「Browserifyで処理するコード」だけrequireが処理されるものであって、「これでフロントエンドでrequireが使える」ようになるものではありません。

module.exportsではなく、window.cryp = crypのような形でグローバルオブジェクトから使う」あるいは「すべてをBrowserifyで処理するJavaScriptソース側に書いてしまう」などの書き方が必要です。

投稿2018/12/08 23:25

編集2018/12/08 23:26
maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mote

2018/12/09 04:39

ありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問