どうせなら時計をiPhoneでも動かしてみたいって事で、javascriptをあーしてこーして動かしてみるの巻。

なんでiPhoneのSafariで動かないかって言うと、javascriptのバーションes2015は実行出来るもののモジュールのimportには対応していないからです。なのでモジュールを結合(バンドル)する必要があります。

es2015をes5にトランスパイルします、babelのお仕事です。それからwebpackを使ってバンドルします。んで、iPhoneでも動くヤツ。

スクリプトは書き換えてないので、マウスオーバー(rollover)が動きません。スマホにマウスはありませんから…。

以降は設定もろもろ。

トランスパイルとバンドルに必要なbabelとwebpackの準備

> npm i -D @babel/core @babel/preset-env @babel/plugin-proposal-class-properties

> npm i -D webpack webpack-cli copy-webpack-plugin babel-loader

webpack.config.jsの中身

const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");
let copyWebpack_client = new CopyWebpackPlugin({
    patterns: [
        {
            from: "./**/*.{html,css}",
            to: "./",
            context: "./src",
        },
    ],
});
let babel_transpile = {
    loader: 'babel-loader',
    options: {
        presets: [
            '@babel/preset-env',
        ],
        plugins:[
            '@babel/plugin-proposal-class-properties',
        ]
    }
}
let for_client ={
    target: "web",
    mode: "production",
    entry: {"main":"./src/main.js"},
    output:{
        path: path.resolve(__dirname,"dist"),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [babel_transpile]
            }
        ]
    },
    plugins: [copyWebpack_client]
};
module.exports = () => {
    return [for_client]
}

このあたりWebStorm IDEがよしなにやってくれないんでしょうか？ここまでやるとVS codeと手間は変わらない気がする。