回答編集履歴

1 追記部分より下の行を追記

退会済みユーザー

退会済みユーザー

2018/12/02 22:20  投稿

> 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
window.$ = jquery
## 追記
`es5`というバージョンのjavascriptにはjsのモジュール化という仕組みがありません。
そのため、複数のjsファイルでのやり取りはグローバルオブジェクト(`window`)でやり取りを行います
hoge.js
```javascrip
window.hoge = funciton(){ 処理 }
```
piyo.hs
```javascript
window.hoge();  //hoge.jsで定義した関数を使う
```
このやり方は、ファイル数が増えれば増えるほど、定義場所が不明になったり、piyo.jsより先にhoge.jsを読み込むなど読み込む順を気にする必要があったりと、色々問題があり、あまりよろしくありません。
----
`node`はこれを解決するために`commonJs`というjsファイルをモジュール化する仕組みを取り入れる事で解決しました。
hoge.js
```javascript
module.exports.hoge = function(){ 処理 }
```
piyo.js
```javascript
var result = require('./hoge');
result.hoge(); //hoge.jsで定義した関数を使う
```
このようにする事で、使用者が`require`で読み込むjsファイルを指定するので、定義場所は明確にわかりますし、
読み込みの順番を管理する必要がないなど先ほどの問題を解決しました
`commonJs`についてはご自身で調べてください。
---
`browser`でも、この仕組みを使いたい訳ですが、あくまで`node`で実装されている仕組みであり、`browser`では使えません。
これを`browser`でも使えるようにするために開発されたものが`webpack`です。
---
`jquery`は`scriptタグ`で読み込まれたか`require`(`import`)で読み込まれたか検知する仕組みがはいており、
`scriptタグ`で読み込まれた場合は、`window.jquery`(`window.$`)に展開し、
`require`(`import`)で読み込まれた場合は`module.exports`でjqueryオブジェクトを返すだけになっています。
そのため`import 'jquery'`でjqueryを読み込んでもwindow.$には何も入りません。
---
```javascript
import jquery from 'jquery'
window.$ = jquery;
```
これを行うと問題は解決しますが、`webpack`でモジュール化をする利点が一切なくなります。
`webpack`を使うのであれば、個々のjsファイルで都度importするのが正しい使い方になります
hoge.js
```javascript
import jquery from 'jquery'
jqueryオブジェクトを使う
```
piyo.js
```javascript
import jquery from 'jquery'
jqueryオブジェクトを使う
```
app.js
```javascript
import './hoge';
import './fuga';
```
---
最後にrequireとimportの違いですが、
`browser`にはモジュール化の仕組みがないと記載しましたが、新しいバージョンのjavascriptではモジュール化の仕組みが入りました。(chromeなどではもう使えますが、IEでは使えません)
これは、nodeのcommonJsと同じような仕組みなのですが、書き方が変わり、import/exportになっています
`esModule`と呼ばれる仕組みなので。ご自身で調べてみてください。
`webpack`は、どちらの書き方にも対応しているので、どちらの書き方も解釈することができます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る