EC-CUBE2系のjsのバージョンが古くてやばいのでアップデートしたい、でもcdnは嫌だと言われる
ので勉強ついでにnpmを使ってみました
最近ではyarnは要らないという話も聞きますが、取捨選択できるほどはよくわからんのでパッケージ管理はyarnを使います
brew install 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が必要とかなってわけわからんので諦めました
コメント