質問編集履歴

2 FB fix

nnahito

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を作成
```
<script src="js/dist/main.min.js"></script>
<script>
   $(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

nnahito score 1841

2018/12/02 12:49  投稿

Webpackでjqueryなどが認識されない
# はじめに
Node系、npm系初心者です。
# 疑問
yarnを使ったパッケージ管理で、
yarn install(yarn add?)したあとにnode_modulesフォルダに入ったJSファイルを
普通に使いたい。
とりあえず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を作成
```
<script src="js/dist/main.min.js"></script>
<script>
   $(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のライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

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