Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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

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

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

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

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

IMG_9879.JPG

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 babel-core@7.0.0-bridge.0 --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でまずは確認!

IMG_9880.JPG

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away