Symfony：Webpack Encore-リソース管理プラグイン

昨日、私はSymfonyチームがすばらしいWebpackツールをアプリケーションに統合するためにWebpack Encoreプラグインをリリースしたというニュースを発見しました。 Webpackに慣れていない場合は、プロジェクトのリソース管理に関連する多くの問題を解決できる可能性があるため、Webpackに慣れることを強くお勧めします。 いずれにせよ、たとえそれを使用するつもりがなくても、存在することを知ることは非常に役立ちます。 このツールは、 ここで非常によく説明されています 。

エントリー

かつて、リソース管理のためのさまざまなアプローチとツールを試しました。 原則として、プロジェクトごとに、構造の複雑さに応じて、異なるソリューションを選択する必要がありました。 しかし、どちらのソリューションを選択しないのか、常に不満を感じていました。 常に何らかの松葉杖があったか、解決策に適応する必要がありました。



2日前、SymfonyプロジェクトのWebpack Encoreのプラグインを試しました。 わずか2日後、しばらくしてからこのプラグインについて気が変わりますが、今では感銘を受けて、このプラグインが提供する機能を紹介したいと思います。

必要なツール

Symfony> = 3.3、 NodeJS、およびYarnパッケージマネージャーでテストプロジェクトが必要になります。 Npmを使用できますが、この投稿ではYarnを使用します。



テストでは、FontAwesome、Jquery、Bootstrap、および独自に開発したリソースの一部をプロジェクトに接続します。

設置

最初にWebpack Encoreプラグインをインストールします。 アプリケーションのルートで：

yarn add @symfony/webpack-encore --dev
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

SASSを使用するため、いくつかのパッケージを追加します。

 yarn add sass-loader node-sass --dev
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

node_modulesディレクトリを.gitignoreに忘れずに追加してください。

リソース準備

必要なすべてのリソースを配置するアプリケーションルートにasset /ディレクトリを作成します。 その結果、私のディレクトリは次のようになります。

 +-assets/ ---+ dist/ ------+ fontawesome/ ------+ jquery/ ------+ bootstrap/
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに、asset / app.scssファイルのルートに作成します。これはメインのリソースファイルです。 ライブラリを含むdistディレクトリは必要ありません。Yarnを使用してインストールできます。 より明確にするために、このパスを選択しました。



次に、プラグインの手順を作成する必要があります。 これを行うには、アプリケーションルートに次の内容のwebpack.config.jsファイルを作成します。

 /*   */ var Encore = require('@symfony/webpack-encore'); Encore /*       */ .setOutputPath('web/build/') /*  web    web/build */ .setPublicPath('/build') /*        /build */ .cleanupOutputBeforeBuild() /*        */ .addStyleEntry('styles', './assets/app.scss') /*   sass/scss  */ .enableSassLoader() /*        */ .enableSourceMaps(!Encore.isProduction()); /*    */ module.exports = Encore.getWebpackConfig();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、リソースを実行できます。 app.scssファイルを編集します。

 @import "dist/fontawesome/css/font-awesome"; @import "dist/bootstrap/css/bootstrap"; /*          */
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ビルドを起動します。 アプリケーションのルートで：

 ./node_modules/.bin/encore dev
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてが順調に進んだ場合、fontsawesome.cssによって参照されるすべてのfont-awesomeフォントがコピーされるfontsフォルダーと同様に、web / buildディレクトリにstyles.cssファイルが表示されます。 画像を使用するスタイルの一部を登録している場合、これらの画像はweb / build / imagesフォルダにも取り込まれます。 結果のスタイルファイルでは、すべてのパスがそれに応じて書き換えられます。



生成されたリソースマップのおかげで、ブラウザでデバッガを快適に使用できます。 スタイルに加えて、manifest.jsonファイルがweb / buildsディレクトリに表示されます。これについては少し後で説明します。



次に、必要なJavaScriptを接続する必要があります。 これを行うには、app.jsファイルを次の内容のasset /ディレクトリに追加します。

 var $ = require('./dist/jquery/jquery-3.2.1'); require('./dist/bootstrap/js/bootstrap');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、webpack.config.jsファイルを少し編集します。

 /*   */ var Encore = require('@symfony/webpack-encore'); Encore /*       */ .setOutputPath('web/build/') /*  web    web/build */ .setPublicPath('/build') /*        /build */ .cleanupOutputBeforeBuild() /* ---   JavaScript   --- */ .addEntry('scripts', './assets/app.js') /*        */ .addStyleEntry('styles', './assets/app.scss') /*   sass/scss  */ .enableSassLoader() /*        */ .enableSourceMaps(!Encore.isProduction()); /*    */ module.exports = Encore.getWebpackConfig();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アセンブリを再起動します。

 ./node_modules/.bin/encore dev
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてが順調に進んだ場合、scripts.jsファイルがweb / buildsディレクトリに作成されます。



jQueryがグローバルに利用できることを期待するスクリプトに問題がある可能性があります。 var $ = require（some.js）を実行すると、スクリプトはグローバルではなく現在のコンテキストに含まれます。 したがって、テンプレートで定義したスクリプト、およびグローバルjQueryを待機している他のライブラリは機能しません。



この問題にはいくつかの解決策があります。 requireを介して接続するすべてのパッケージについて、webpack.config.jsファイルに次の指示を追加することにより、$またはjQueryへのアクセスを提供できます。

 /*   */ var Encore = require('@symfony/webpack-encore'); Encore /*       */ .setOutputPath('web/build/') /* ... */ .autoProvidejQuery() /*        */ .enableSourceMaps(!Encore.isProduction()); /*    */ module.exports = Encore.getWebpackConfig();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これですべてが整いましたが、テンプレートで定義したスクリプトにはjQueryが表示されません。 この場合、おそらくライブラリを手動でグローバルスコープに追加する必要があります。 これを行うには、app.jsファイルを編集します。

 var $ = require('./dist/jquery/jquery-3.2.1'); global.$ = global.jQuery = $; require('./dist/bootstrap/js/bootstrap');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

もう一度、アセンブリを実行すると、すべてが非常にコンパクトにパックされ、ディレクトリにソートされます。1つのスタイルファイルと1つのスクリプトファイルがあります。 すべての依存関係（フォント、画像）が適切な場所にコピーされます。

バージョニングの有効化：

 /* webpack.config.js */ // ... .enableVersioning() // ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この機能を有効にする場合、Symfonyプロジェクトの設定でいくつかの設定を行う必要があります：

 # app/config/config.yml framework: # ... assets: #     Symfony 3.3 json_manifest_path: '%kernel.project_dir%/web/build/manifest.json'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

manifest.jsonファイルには、バージョン対応のリソースファイルとリソースファイルの対応のマップが格納されます。 Twigテンプレートでスタイルを接続します：

 <link href="{{ asset('build/styles.css') }}" rel="stylesheet" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際、フォームのファイルが接続されます：build / styles.c1a32e.css

JavaScriptを介してスタイルを接続します。

JavaScriptを使用してスタイルファイルをインポートする余裕があります。 プロジェクトを例として使用して、app.jsでこれを行うことができます。

 require('./app.scss'); var $ = require('./dist/jquery/jquery-3.2.1'); global.$ = global.jQuery = $; require('./dist/bootstrap/js/bootstrap');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、webpack.config.jsにaddStyleEntryを追加する必要はありません。 アセンブリ後、このスクリプトで要求されたすべてのスタイルを含む同じ名前のjsファイルとcssファイルが自動的に作成されます。

展開する

かなり全体的なトピックですが、とにかくそれに触れます。 サーバー側でビルドする場合は、web / buildディレクトリを.gitignoreに追加して、運用サーバーで実行する必要があります。

 ./node_modules/.bin/encore production
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

本番モードでは、スクリプトとスタイルがさらに縮小されます。



本番環境でのプロジェクトの展開時間が非常に重要な場合は、リソースをアセンブルし、既製のファイルをリポジトリにコミットできます。

おわりに

この資料は、実際の条件での使用を目的としていません。 特定の状況ごとに、独自のアプローチと設定があります。 プロジェクトのリソースを管理するための別のオプションを示したかっただけです。 webpackに精通している人は、おそらくSymfony開発者からのそのようなプラグインが登場したという有用な情報を見つけるでしょう。 webpackに慣れていない人は、このツールに興味があるかもしれません。



私は多くのことをより詳細に説明したいと思いますが、どのように試みても、私はまだ肥大化しすぎていました。 十分な批判がある場合は、資料を修正する準備ができています。 以下は、これらのツールをより深く理解できるリンクです。



→ オフィシャルサイトのWebPACK

→ マニュアルのプラグイン



ご清聴ありがとうございました。