Polymer를 사용하여 만든 프로그램이 크롬 이외의 브라우저에서 실행되지 않을 경우 Polyfill을 제대로 불러올 수 없습니다.

polymer-cli의 모형

polymer-cli로 응용 프로그램의 초기 형태를 만들었을 때index.html는 다음과 같은 느낌으로 변했다.
index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>hoge app</title>
    <meta name="description" content="hoge app description">

    <!-- See https://goo.gl/OOhYW5 -->
    <link rel="manifest" href="/manifest.json">

    <script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="import" href="/src/hoge-app/hoge-app.html">
  </head>
  <body>
    <hoge-app></hoge-app>
  </body>
</html>

여기, /bower_components/webcomponentsjs/webcomponents-lite.js는 Polyfill입니다. WebComponents API를 지원하지 않는 브라우저에서도 Polymer로 제작된 응용 프로그램을 사용하여 실행할 수 있는 프로그램 라이브러리입니다. 그런데도 polymer build,이것/bower_components/webcomponentsjs/webcomponents-lite.js은 구축에 포함되지 않습니다

!!!

어떻게

Polymer의 구축 설정 파일은 polymer.json입니다.여기에 종속 서류/bower_components/webcomponentsjs/webcomponents-lite.js를 추가하면 된다.polymer.json의 작법에 대해서도 잘 모르겠지만 https://www.polymer-project.org/1.0/docs/tools/polymer-cli#build를 참고하여 쓰면 됩니다.예를 들어 내가 만든 정렬 알고리즘을 시각화한 응용 프로그램1의 polymer.json은 다음과 같은 느낌을 준다.
polymer.json

{
  "entrypoint": "index.html",
  "shell": "src/sort-app/sort-app.html",
  "fragments": [
  ],
  "includeDependencies": [
    "bower_components/webcomponentsjs/webcomponents-lite.js",
    "bower_components/webcomponentsjs/webcomponents-lite.min.js"
  ]
}

이렇게 하면 Polyfill이 읽히고 Firefox 등 다른 브라우저도 정상적으로 작동할 수 있다

Polyfill 조건 로드

공식 홈페이지https://www.polymer-project.org/1.0/docs/browsers에서 클라이언트 측에서 Polyfill이 필요한지 판단하고 필요할 때만 불러오는 것을 권장합니다.
우선index.html의<script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>hoge app</title>
    <meta name="description" content="hoge app description">

    <!-- See https://goo.gl/OOhYW5 -->
    <link rel="manifest" href="/manifest.json">

    <!-- <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> -->

    <link rel="import" href="/src/hoge-app/hoge-app.html">
  </head>
  <body>
    <hoge-app></hoge-app>
  </body>
</html>

그런 다음 공식 웹 사이트의 소스 코드를 복제합니다2.
index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>hoge app</title>
    <meta name="description" content="hoge app description">

    <!-- See https://goo.gl/OOhYW5 -->
    <link rel="manifest" href="/manifest.json">

    <!-- <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> -->

    <link rel="import" href="/src/hoge-app/hoge-app.html">
  </head>
  <body>
    <hoge-app></hoge-app>
    <script type="text/javascript">
      (function() {
        if ('registerElement' in document
            && 'import' in document.createElement('link')
            && 'content' in document.createElement('template')) {
          // platform is good!
        } else {
          // polyfill the platform!
          var e = document.createElement('script');
          e.src = 'bower_components/webcomponentsjs/webcomponents-lite.min.js';
          document.body.appendChild(e);
        }
      })();
    </script>
  </body>
</html>

이렇게 되면 Polyfill은 필요하지 않은 브라우저에서 불필요한 불러오는 일이 발생하지 않을 것이다

데모: http://kumassy.com/sort/ 소스 코드: https://github.com/Kumassy/sort_visualizer ↩
자세히 보면 원본 코드는 공식 사이트와 조금 다르다. '/bower_components/webcomponentsjs/webcomponents-lite.min.js'가 아니라 'bower_components/webcomponentsjs/webcomponents-lite.min.js'이다.애플리케이션을 GiitHub Pages로 설계하기 위한 것입니다. ↩

Reference

이 문제에 관하여(polymer-cli로 구축된 프로그램이 크롬 이외의 브라우저에서 움직이지 않을 때 확인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Kumassy/items/82165f77a1f370549fad

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

polymer-cli로 구축된 프로그램이 크롬 이외의 브라우저에서 움직이지 않을 때 확인

polymer-cli의 모형

어떻게

Polyfill 조건 로드

Reference

좋은 웹페이지 즐겨찾기