ポートフォリオを作り始めて無料で公開する（Babelの塔）

3274 ワード
babel JavaScript ポートフォリオ HTML5 webpack JavaScript テキストリンク

ポートフォリオを作り始めて無料で公開する（写真から色コードを抽出してデザインする）の続きです。

作りかけのポートフォリオ

未だポートフォリオの中身が何も作れてませんが、今の所こんな感じ。
https://portfolio-893ef.firebaseapp.com/

とにかくファーストビューのところだけ、延々とゴニョゴニョしてて、なかなか進みません。
まあ、中身は書ける内容があんまり無いので、スッカスッカの予定だから別にいいんですが。

パララックスサイトにするのは、scrollmagic入れてみたら、割と簡単に出来そうだった。
一応、少しだけ手を付けてそれっぽく出来た。だが、まだやってない。

開発は普段iMacのChfomeでやってますが、ふと、Win7のIE11で開いてみた。

Ooops、ES6で書いてたせいで、お真っ白でございました。
クソっ！　Opera、Firefox、Slepnir、Safariでは、ちゃんとみれたのに。。。

ってな訳で、BabelでES5にトランスパイルして、デプロイしてみる事にしました。

npm i babel-cli babel-preset-env　babel-preset-env　babel-polyfill　babel-loader　@babel/preset-env　@babel/core　[email protected] --save-dev
.babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "last 2 versions"
          ]
        }
      }
    ]
  ]
}
webpack.config.js
rules: [
+      {
+        test: /\.js$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
+      }
    ]

これで、webpackでビルドしてみたら、正常ビルドできた！
では早速、Chromeでまずは確認！

はて？今度はChromeで動かなくなりました。何か間違ってるのだろうか。どうすればいいやら。。。