EC-CUBE2系のjsをnpmを使ってバージョンアップ&管理する

EC-CUBE2系のjsのバージョンが古くてやばいのでアップデートしたい、でもcdnは嫌だと言われる
ので勉強ついでにnpmを使ってみました

最近ではyarnは要らないという話も聞きますが、取捨選択できるほどはよくわからんのでパッケージ管理はyarnを使います

brew install yarn

インストール | Yarn

次にまずはjQueryを入れてみます

yarn add jquery

[email protected] などとするとバージョンが指定できる
※ コマンドを実行すると、実行したルートディレクトリに node_modules というディレクトリが作られてその中にjqueryがダウンロードされる

このままだとjquery使うには、ドキュメントルートにコピーする必要が出てきてしまうので、 webpack を使ってみることにしてみます
※ Browserify やら色々出てきてどれがいいのかわからないので一番メジャーそうなやつを選択

yarn add -D webpack webpack-cli

webpack.config.js を作ります
※これがどんどんわけわからんくなる

var path = require('path');
var webpack = require("webpack");

module.exports = {
    entry: {
        eccube: './data/eccube.js',
    },
    devtool: 'source-map',
    output: {
        path: path.join(__dirname, "html/js"),
        filename: '[name].js',
    },
    resolve: {
        alias: {
            jquery: path.join(__dirname, 'node_modules', 'jquery'),
        }
    },
    module: {
        rules: [
            {
                test: /\.css/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader'
                    }
                ],
            },
            {
                test: /\.png|jpg|svg|gif|eot|wof|woff|ttf$/,
                use: ['url-loader']
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ]
};

※ この時点では module は不要だけど後で出てくる。
※ entryがこれから作るjsで output がそれを出力する先
※ resolve で jquery を固定?してやらないとjquery.pluginの中にjqueryがある場合にわけわからなくなる
※ plugins の中の記載はホントに必要なのかよくわからない

data/eccube.js を作ります
元々の html/js/eccube.js をそのままコピってます

const $ = require( "jquery" );

global.$ = global.jQuery = $;
require( "jquery-migrate" );

/* 警告を無効にする */
$(() => {
  $.migrateMute = true;
});
require( "jquery-colorbox" );
require( 'jquery-colorbox/example2/colorbox.css' );
require( "jquery-easing" );

require( 'slick-carousel' );
require( 'slick-carousel/slick/slick.css' );
require( 'slick-carousel/slick/slick-theme.css' );

# この下は元々のeccube.jsそのまま

※ 1行目でjqueryを呼び出し、3行目の記載でテンプレート上でもjqueryが有効になるようにしている
※ これをしないと function () {} がエラーになる
※ あとは必要な jquery.plugin を 呼び出している。 全部 yarn add 〇〇 で 事前に追加済み
※ css や css内で読んでいる画像やそのパスもwebpackがいい感じにしてくれる。 yarn add style-loader css-loader url-loader が必要

コンパイル

yarn run webpack 

watchをつけると監視してくれて、jsファイルの編集するたびにコンパイルが走るようになる

yarn run webpack --watch

これで出来上がったjsをテンプレートから呼び出せば終わり

※ jquery.mobileもwebpackで入れようとしたけどgulpが必要とかなってわけわからんので諦めました