はじめに
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が拾えていない…?
これは何故なのでしょうか?
どの指定が間違っているかが現在の知識では検討もつかず……
ご存知の方がいらっしゃいましたらご教示いただけますと幸いです。
回答2件
あなたの回答
tips
プレビュー