laravel55 + Polymer環境構築

laravel55 + Polymer環境構築

PolymerをBowerを使ってインストールするために、.bowerrcファイルをプロジェクトルートに作成します。

{
  "directory": "resources/assets/bower_components",
  "json": "bower.json"
}

bower initを実行して、bower.jsonを作ります。

$ bower init

bower installを実行して、Polymerをインストールします。

$ bower install --save Polymer/polymer 

Laravel mixより、publicディレクトリにbower_componentsディレクトリがコピーされるように修正します。参考
Laravel mixの設定は、webpack.mix.jsに追記します

...

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .copyDirectory('resources/assets/bower_components', 'public/bower_components');

...

index.blade.phpなどのHTMLのheaderにwebcomponentsのポリフィルと、Polymerを読み込みます。

...
    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
    <link rel="import" href="/bower_components/polymer/polymer.html">
...