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

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

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

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

3199閲覧

Webpackでjqueryなどが認識されない

nnahito

総合スコア2004

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

3クリップ

投稿2018/12/02 03:48

編集2018/12/02 07:37

はじめに

Node系、npm系初心者です。

疑問

yarnを使ったパッケージ管理で、
yarn install(yarn add?)したあとにnode_modulesフォルダに入ったJSファイルを
<script src="js/dist/main.min.js"></script>形式で使いたい。

とりあえずjqueryをやってみる。

やったこと

まず、yarnでjqueryを入れる。

yarn add jquery

すると、node_modulesフォルダにjqueryフォルダができ、中にjquery.jsがあることが確認できる。
このまま使ってはいけないらしいので、webpackでコンパイル(?)を行う。


まずは必要プラグインを整える。

yarn add gulp gulp-uglify webpack-stream webpack gulp-concat

次に、app.jsの作成

import './node_modules/jquery/dist/jquery.js'

gulpfile.jsの作成

const gulp = require('gulp'); const uglify = require('gulp-uglify'); const webpackStream = require("webpack-stream"); const webpack = require("webpack"); const concat = require("gulp-concat"); // webpackの設定ファイルの読み込み const webpackConfig = require("./webpack.config"); gulp.task('default', function () { }); // task gulp.task('jsmin', function () { // 設定ファイルで指定してあるデータをコンパイルして、吐き出す return webpackStream(webpackConfig, webpack) .pipe(gulp.dest("js/dist/")); });

webpack.config.jsの作成

const path = require('path'); // Webpack化して出力する設定 module.exports = { // モード値を production に設定すると最適化された状態で、 // development に設定するとソースマップ有効でJSファイルが出力される mode: "production", // コンパイル元 entry: path.resolve(__dirname, "app.js"), // コンパイル先のファイル名 output: { filename: "[name].min.js", }, }

ここまでのフォルダ構成

イメージ説明


gulpを実行

>gulp jsmin [12:41:17] Using gulpfile ~\Desktop\node\gulpfile.js [12:41:17] Starting 'jsmin'... [12:41:17] Version: webpack 4.26.1 Built at: 2018-12-02 12:41:17 Asset Size Chunks Chunk Names main.min.js 86.1 KiB 0 [emitted] main Entrypoint main = main.min.js [12:41:17] Finished 'jsmin' after 808 ms

指定通り、js/dist/main.min.jsが作成されていることを確認。

イメージ説明


main.min.jsを呼び出してみる。
index.htmlを作成

<script src="js/dist/main.min.js"></script> <script> $(document).ready(function () { alert('aaa'); }) </script>

ブラウザで見てみる。
jqueryが拾えていない…?

イメージ説明


これは何故なのでしょうか?
どの指定が間違っているかが現在の知識では検討もつかず……

ご存知の方がいらっしゃいましたらご教示いただけますと幸いです。

yukapome789👍を押しています

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

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

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

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

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

CHERRY

2018/12/02 04:58

「普通に使いたい。」とは、どのようにでしょうか? html ファイルから直接呼び出したいということでしょうか? 普通の定義は、人によって違うと思うので具体的に記載していただけないでしょうか?
nnahito

2018/12/02 05:40

コードの通り、jqueryを「js/dist/main.min.js」に出力し、index.htmlで「js/dist/main.min.js」を呼び出し、そのindex.html内でjqueryを使いたいのです。コードはすべて提示しております。ご不明点がありましたらお手数ですが、コード内の箇所でのご指摘をいただけますとありがたいです。
guest

回答2

0

ベストアンサー

import './node_modules/jquery/dist/jquery.js'

umdなのでimportしてもグローバルには展開されません。

import jquery from './node_modules/jquery/dist/jquery.js';
を毎回使う場所で行ってください。

node_modulesのパスは解決されるので
import jquery from 'jquery';
でも取れると思います。

$でみたければ、自身で代入すればよいです。
import jquery from 'jquery';
window.$ = jquery

追記

es5というバージョンのjavascriptにはjsのモジュール化という仕組みがありません。
そのため、複数のjsファイルでのやり取りはグローバルオブジェクト(window)でやり取りを行います

hoge.js

javascrip

1window.hoge = funciton(){ 処理 }

piyo.hs

javascript

1window.hoge(); //hoge.jsで定義した関数を使う

このやり方は、ファイル数が増えれば増えるほど、定義場所が不明になったり、piyo.jsより先にhoge.jsを読み込むなど読み込む順を気にする必要があったりと、色々問題があり、あまりよろしくありません。


nodeはこれを解決するためにcommonJsというjsファイルをモジュール化する仕組みを取り入れる事で解決しました。

hoge.js

javascript

1module.exports.hoge = function(){ 処理 }

piyo.js

javascript

1var result = require('./hoge'); 2result.hoge(); //hoge.jsで定義した関数を使う

このようにする事で、使用者がrequireで読み込むjsファイルを指定するので、定義場所は明確にわかりますし、
読み込みの順番を管理する必要がないなど先ほどの問題を解決しました

commonJsについてはご自身で調べてください。


browserでも、この仕組みを使いたい訳ですが、あくまでnodeで実装されている仕組みであり、browserでは使えません。

これをbrowserでも使えるようにするために開発されたものがwebpackです。


jqueryscriptタグで読み込まれたかrequire(import)で読み込まれたか検知する仕組みがはいており、
scriptタグで読み込まれた場合は、window.jquery(window.$)に展開し、
require(import)で読み込まれた場合はmodule.exportsでjqueryオブジェクトを返すだけになっています。

そのためimport 'jquery'でjqueryを読み込んでもwindow.$には何も入りません。


javascript

1import jquery from 'jquery' 2window.$ = jquery;

これを行うと問題は解決しますが、webpackでモジュール化をする利点が一切なくなります。
webpackを使うのであれば、個々のjsファイルで都度importするのが正しい使い方になります

hoge.js

javascript

1import jquery from 'jquery' 2 3jqueryオブジェクトを使う

piyo.js

javascript

1import jquery from 'jquery' 2 3jqueryオブジェクトを使う

app.js

javascript

1import './hoge'; 2import './fuga'; 3

最後にrequireとimportの違いですが、
browserにはモジュール化の仕組みがないと記載しましたが、新しいバージョンのjavascriptではモジュール化の仕組みが入りました。(chromeなどではもう使えますが、IEでは使えません)
これは、nodeのcommonJsと同じような仕組みなのですが、書き方が変わり、import/exportになっています

esModuleと呼ばれる仕組みなので。ご自身で調べてみてください。

webpackは、どちらの書き方にも対応しているので、どちらの書き方も解釈することができます。

投稿2018/12/02 07:31

編集2018/12/02 13:20
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

nnahito

2018/12/02 07:37

ご回答有り難うございます。 > import jquery from './node_modules/jquery/dist/jquery.js'; > を毎回使う場所で行ってください。 こちらなのですが、gulpでのコンパイルは意味がない、ということでしょうか? 出力された「js/dist/main.min.js」には、jQueryが含まれているように思えるのですが、 コレは違うのでしょうか?
退会済みユーザー

退会済みユーザー

2018/12/02 07:50

jqueryは含まれていますが、グローバルには展開されません。 import jquery from 'jquery'; console.log(jquery) でjqueryが含まれている事は確認できると思います。 詳しくはumdについて調べられると良いと思います。
nnahito

2018/12/02 11:10

ご返信ありがとうございます。 UMD……あまり詳しい解説が出てきませんが…… 要はJSをカプセル化しているというイメージですかね…… では、同様にapp.jsでvue.jsを使いたい場合は、 import Vue from './node_modules/vue/dist/vue.js' windows.vue = require('Vue'); とすればいいかと思うのですが…… コレを行いコンパイルしても、 TypeError: Vue is not a constructo と出てしまいます。 こちらも同じ現象なのでしょうか? それともまた別の現象なのでしょうか?
退会済みユーザー

退会済みユーザー

2018/12/02 13:21

> windows.vue = require('Vue'); windowsではありません、windowです。 あと本文に説明を追記しました。
nnahito

2018/12/02 14:43

ご回答と丁寧な解説誠にありがとうございます。 私自身、まだまだ理解が及んでいませんので、じっくりと拝見させていただきます。 取り急ぎ読ませていただいた感じでは、 (1)現在の私のやり方はモダンなやり方ではない (2)このやり方でvueなどを扱うには、完全にJSファイルを分ける必要がある(htmlファイル内での<script>では使えない) という認識で間違いないでしょうか?
退会済みユーザー

退会済みユーザー

2018/12/02 23:05

ひとまず、そういう認識で良いと思います。 html内のscriptタグはwebpackの管理外なので、こことやり取りをするためには昔ながらのグローバルオブジェクトでやりとりする必要が出てきます。 そのため、webpackを使う意味がなくなってしまうので基本的には間違っています。 jsファイルを分けて、すべてwebpackの管理下におくのが正しいやり方です。 (実際はwebpackで色々設定できるので、ある程度理解した後にwebpackの設定を細かく確認されると良いと思います)
nnahito

2018/12/03 00:05

ご回答有り難うございます! 長々とありがとうございました。 勉強させていただきます
guest

0

初心者ほど余計なことはしないほうがいい。混乱するだけ。
jQuery使いたいだけならwebpackなんかいらないので直接使えばいい。
npmさえも不要でCDNで十分。

・webpack使う場合
gulpはいらない。webpack.config.jsも自分で書かない。
Laravel mixを単体で使うのが一番簡単。
Laravelプロジェクトからpackage.json,webpack.mix.js,resourcesを持ってきて不要な部分を削除。
https://github.com/laravel/laravel
jQueryの読み込みはこうなってる。他にも使用方法はあるけど気にしなくていい。

window.$ = window.jQuery = require('jquery');

ファイルの出力先はwebpack.mix.jsで変えればいいので
npm run prodでビルドして終わり。

投稿2018/12/02 04:45

kawax

総合スコア10377

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

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

nnahito

2018/12/02 04:50

ご回答有り難うございます。 まず、Laravelではありません。 そしてWebpackの勉強ですので、 「 初心者ほど余計なことはしないほうがいい。混乱するだけ。 jQuery使いたいだけならwebpackなんかいらないので直接使えばいい。 npmさえも不要でCDNで十分。 」 と言われると、「勉強するな」と言われているような印象を抱きます…… すいませんが、意図から外れすぎたご回答は避けていただけますと幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問