質問編集履歴

2 FB fix nnahito score 1841 2018/12/02 16:37 投稿

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

# はじめに

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",

}

```

---

ここまでのフォルダ構成

![イメージ説明](759d751cb219795600a552dc72427e99.jpeg)

---

`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`が作成されていることを確認。

![イメージ説明](cffd70555d041d29a1962bfdd5311c4a.jpeg)

---

main.min.jsを呼び出してみる。

index.htmlを作成

```

$(document).ready(function () {

alert('aaa');

})

</script>

```

---

ブラウザで見てみる。

jqueryが拾えていない…？

![イメージ説明](105c938a1aa846981b3c6078277b5902.jpeg)

---

これは何故なのでしょうか？

どの指定が間違っているかが現在の知識では検討もつかず……

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

JavaScript

25669 questions

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

jQuery

10014 questions

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

webpack

436 questions

npm

530 questions

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

1 フォルダ構成追加 nnahito score 1841 2018/12/02 12:49 投稿