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

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

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

Q&A

1回答

912閲覧

webpackでビルドする時にエラーを出して欲しい

Fushihara

総合スコア52

0グッド

0クリップ

投稿2019/04/21 07:49

以下のコードをwebpackでビルドした後実行するとエラーが出ます。

const http = require('http'); const URL = 'http://example.com'; http.get(URL, (res) => { let body = ''; res.setEncoding('utf8'); res.on('data', (chunk) => { body += chunk; }); res.on('end', (res) => { console.log(body); }); });

./node_modules/.bin/webpack.cmd --mode development index.js

// 実行結果 $ node dist\main.js webpack:///./node_modules/stream-http/index.js?:18 var defaultProtocol = global.location.protocol.search(/^https?:$/) === -1 ? 'http:' : '' ^ TypeError: Cannot read property 'protocol' of undefined at Object.http.request (webpack:///./node_modules/stream-http/index.js?:18:40) at Object.get (webpack:///./node_modules/stream-http/index.js?:43:17) at eval (webpack:///./index.js?:3:6) at Object../index.js (.\dist\main.js:96:1) at __webpack_require__ (.\dist\main.js:20:30) at .\dist\main.js:84:18 at Object.<anonymous> (.\dist\main.js:87:10) at Module._compile (internal/modules/cjs/loader.js:738:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:749:10) at Module.load (internal/modules/cjs/loader.js:630:32) exit status 1

この場合、webpackのターゲット はブラウザを意味するwebになっており、普通のブラウザではhttpモジュールは無いので実行時にエラーが出るのは理解出来ます。

そこで質問なのですが、この様に実行出来ないjsを出力する時、ビルドの時にエラーを出す方法を教えてください。
今回はシンプルなコードなのですぐに気が付きますが、これが他人の作ったモジュールで、普段通らないロジックだった時が怖いです。

また、npmからinstallしたモジュールにこのような記述があった場合はエラーが起きないようにする事は無理でしょうか。
例えば、自動的にfetchに変換するとか。(機械的に置き換えられるものでは無いのは分かっていますが)

最後に、自分でこの様なロジックを書く場合にはどう書けばnodeでもブラウザ上でも動くコードにする事が出来ますでしょうか。
ブラウザから動かすにはfetchを使えばいいのかなと思ったのですが、何もrequireせず直接fetch("http://example.com")と書くと、node上で動かす時にエラーが出てしまいます。

// index.js const URL = 'http://example.com'; fetch(URL).then(request=>request.text().then(text=>{ console.log(text); }))
// 実行結果 $ node index.js .\index.js:2 fetch(URL).then(request=>request.text().then(text=>{ ^ ReferenceError: fetch is not defined at Object.<anonymous> (.\index.js:2:1) at Module._compile (internal/modules/cjs/loader.js:738:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:749:10) at Module.load (internal/modules/cjs/loader.js:630:32) at tryModuleLoad (internal/modules/cjs/loader.js:570:12) at Function.Module._load (internal/modules/cjs/loader.js:562:3) at Function.Module.runMain (internal/modules/cjs/loader.js:801:12) at internal/main/run_main_module.js:21:11 exit status 1

環境変数か何かで、自分がnodeランタイムで動いているのはchrome上で動いているのか判断して処理を分ける。というロジックが必要でしょうか。

複数の質問になってしまいましたが、よろしくおねがいします。

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

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

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

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

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

guest

回答1

0

そこで質問なのですが、この様に実行出来ないjsを出力する時、ビルドの時にエラーを出す方法を教えてください。

--target=webになっている以上、ブラウザ環境で正常に動作するコードが出力され、--target=nodeであれば正常にnodeで実行可能なコードが出力されることを確認しました。
webpackは指定された環境で正常に動くコードを出力しているわけなので、webpackで検出することは不可能でしょう。
例えるなら、Mac用に作成したバイナリがWindowsで動かない、というのと同じような状況です。

ただ、--target=webにデフォルトでなってしまうことを防ぐという意味合いでしたら、都度コマンドライン引数で指定する形ではなく、予めwebpack.config.jsを用意しておくか、package.jsonscriptを定義しておくかすることである程度防ぐことは可能なのではないでしょうか。


この様に実行出来ないjsを出力する時、ビルドの時にエラーを出す方法を教えてください。

正直なところ、JSはコード上で型を表現できないため、完全に検出することは困難かと思います。
ただ、TypeScriptであれば改善することはできるかと思います。

以下のドキュメントの「JavaScriptに型を追加する理由は?」の項にも
https://typescript-jp.gitbook.io/deep-dive/getting-started/why-typescript#typescriptnoshisutemutype-system

コンパイルの時点でエラーを検出する方が、ランタイムでの実行時にエラーが発生するよりも優れています

と記載されている通り、TypeScriptの意義として、ビルド時にエラー検出をしっかり行いたいという部分もありますので、TypeScriptを使うことが現実的に一番効果があると思います。


環境変数か何かで、自分がnodeランタイムで動いているのはchrome上で動いているのか判断して処理を分ける。というロジックが必要でしょうか。

こちらは1つ目の回答の通り、そもそもビルド時点でどの環境で動くものなのか正しく指定できていれば判断する必要が無いと思います。

もし、webとnode両対応したnpmモジュールを作成したいという場合に関しては…私自身も開発経験がないので回答できないです。すみません。

投稿2019/05/21 06:05

sansaisoba

総合スコア241

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問