포트폴리오를 만들기 시작하고 무료로 공개 (Babel 타워)

포트폴리오를 만들기 시작하고 무료로 공개 (사진에서 색상 코드를 추출하고 디자인) 의 계속입니다.

제작 포트폴리오

아직 포트폴리오의 내용이 아무것도 만들 수 없습니다만, 지금의 곳 이런 느낌.
h tps://포rt후오오893에 f. 푹 푹 빠져서 p. 코m/

어쨌든 퍼스트 뷰의 곳만, 끊임없이 고뇨고 하고 있어, 좀처럼 진행되지 않습니다.
뭐, 내용은 쓸 수 있는 내용이 그다지 없기 때문에, 스카스카의 예정이니까 따로 좋지만.

패럴랙스 사이트로 하는 것은, 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에서 작동하지 않습니다. 뭔가 잘못되었을까. 어떻게 하면 좋을까. . .