Polymer-installation

提供:Dev Guides
移動先:案内検索

ポリマー-インストール

システムでPolymerを構成するのは簡単です。 以下は、Polymerをインストールする2つの方法です。

  • Polymer CLI(コマンドラインインターフェイス)
  • バウアー

Polymer CLIを使用したPolymerのインストール

  • ステップ1 *-次のnpmコマンドを使用してPolymerをインストールします。
npm install -g polymer-cli@next
  • ステップ2 *-次のコマンドを使用して、正常なインストールとバージョンを確認します。
polymer --version

それが正常にインストールされている場合、次のようにバージョンが表示されます-

  • ステップ3 *-選択した名前でディレクトリを作成し、そのディレクトリに切り替えます。
mkdir polymer-js
cd polymer-js
  • ステップ4 *-プロジェクトを初期化するには、_polymer-jsdirectory_で次のコマンドを実行します。
polymer init

上記のコマンドを実行した後、このようなものが表示されます-

C:\polymer-js>polymer init
? Which starter template would you like to use?
   1) polymer-1-element - A simple Polymer 1.0 element template
   2) polymer-2-element - A simple Polymer 2.0 element template
   3) polymer-1-application - A simple Polymer 1.0 application template
   4) polymer-2-application - A simple Polymer 2.0 application
   5) polymer-1-starter-kit - A Polymer 1.x starter application template, with
      navigation and "PRPL pattern" loading
   6) polymer-2-starter-kit - A Polymer 2.x starter application template, with
      navigation and "PRPL pattern" loading
   7) shop - The "Shop" Progressive Web App demo
   Answer: 4
  • ステップ5 *-上記のオプションからポリマー2アプリケーションを選択します。

ここで、次のコマンドを使用してプロジェクトを開始します。

polymer serve

Bowerを使用したポリマーのインストール

  • ステップ1 *-Bowerメソッドを使用してゼロから開始するには、次のコマンドを使用してBowerをインストールします。
npm install -g bower
  • ステップ2 *-次のコマンドを使用してポリマーをインストールします。
npm install -g polymer-cli@next
  • ステップ3 *-次のコマンドを使用して、Polymerの正常なインストールとバージョンを確認します。
polymer --version

それが正常にインストールされている場合、次のようにバージョンが表示されます-

0.18.0-pre.13.
  • ステップ4 *-bowerから最新のPolymer 2.0 RCリリースをインストールするには、次のコマンドを使用します。
bower install Polymer/polymer#^2.0.0-rc.3

ステップ5 *- *indexl ファイルを作成し、<head>タグに次のコードを追加します。

<script src = "/bower_components/webcomponentsjs/webcomponentsloader.js"></script>
//it loads the polyfills

<link rel = "import" href = "/bower_components/polymer/polymerl">
//it import Polymer
  • ステップ6 *-次のコマンドを使用してプロジェクトを開始します。
polymer serve

展開のための構築

プロジェクトを展開用にビルドするには、 polymer build コマンドがより簡単な方法であり、コマンドラインフラグに応じてコードを縮小、コンパイル、またはバンドルします。

すべてのブラウザーで機能するユニバーサルビルドを作成するには、次のコマンドを使用します。

polymer build --js-compile

上記のコマンドはプロジェクトをbuild/defaultにビルドし、次のコマンドを使用してこのディレクトリを起動できます。

polymer serve build/default

Polymer 2.0は、ES6およびHTMLカスタム要素を使用します。 ベストプラクティスとして、ES6を完全にサポートしているブラウザーでES6を使用し、ES6をサポートしていない古いブラウザーにES5をコンパイルすることをお勧めします。 次の表は、プロジェクトに最適な戦略を示しています。

Strategy Easiest for cross-browser support Most optimal for WC v1 performance
Server Any server works, including static ones Differential serving required
Deployed Code ES5 transpiled ES6
Polyfill Loader webcomponents-es5-loader.js webcomponents-loader.js