SPAの例でSymfony2とRequireJSを友達にする方法

HearsayRequireJSBundleバンドルを使用してSymfony2とRequireJSを使用する方法を示す出版物がすでにあります。 私はこのバンドルの2番目のバージョンの開発に直接関与していたので、最初の行から知っています。 ただし、このバンドルは使用しません。 私はしばしばクライアント部分をSPAとして開発し、より簡単な方法を見つけました、そしてそれは議論されます。



メソッドの主なアイデアは、Webからアクセス可能なパブリックディレクトリにクライアントパーツのソースコードを配置することです。 Symfony2では、これはWebディレクトリです。 その結果、問題なく、 r.jsオプティマイザーを非常に簡単に構成できます。アプリケーション環境に応じてクライアントパーツのソースコードを提供する方法をSymfony2に説明し、r.jsオプティマイザーのかなり単純な構成を記述するだけです。



Bowerを使用して必要なJavaScript依存関係をインストールし、 gulp.js （ Gruntオプションは可能ですが、gulp.jsの方が好きです）を使用してクライアント部分をビルドするため、Node.jsとNPMをインストールする必要があります。



Bowerとgulp.jsが既にインストールされていると仮定します。次に、それらの構成ファイルを追加し、プロジェクトのルートに配置する必要があります。



bower.json

{ "name": "symfony-standard-requirejs", "private": true, "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "almond": "0.3.0", "requirejs": "2.1.15", "rjs": "2.1.15" } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アーモンド （prod環境用の軽量AMDローダー、RequireJSの代替）、RequireJS、およびr.jsオプティマイザーが必要であることを上で示しました。



package.json

 { "name": "symfony-standard-requirejs", "private": true, "dependencies": { "gulp": "3.8.8", "yargs": "1.3.2" } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記で、gulp.jsとyargsが必要であることを示しました。



gulpfile.js

 var gulp = require('gulp'), exec = require('child_process').exec, argv = require('yargs').argv; gulp.task('copy', function () { // almond gulp.src('bower_components/almond/almond.js') .pipe(gulp.dest('web/app/vendor/almond')); // requirejs gulp.src('bower_components/requirejs/require.js') .pipe(gulp.dest('web/app/vendor/requirejs')); // rjs gulp.src('bower_components/rjs/dist/r.js') .pipe(gulp.dest('.')); }); gulp.task('rjs', function (cb) { var env = argv.env ? argv.env : 'dev', cmd = [ 'php app/console cache:clear --env=' + env, 'php app/console assets_version:increment --env=' + env, 'php app/console assetic:dump --env=' + env, 'node r.js -o web/app/app.build.js' ]; exec(cmd.join(' && '), function (err, stdout, stderr) { console.log(stdout); console.log(stderr); cb(err); }); }); gulp.task('build', ['copy', 'rjs']); gulp.task('default', ['build']);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記では、次のタスクを示しました。

• copy -JavaScript依存関係をbower_componentsディレクトリからweb / app / vendorパブリックディレクトリにコピーします
• rjs -Symfony2キャッシュをクリアし、prod環境のアセットのバージョンをインクリメントし（ KachkaevAssetsVersionBundleバンドルをインストールすることを忘れないでください ）、アセットをダンプしてr.jsオプティマイザーを起動します
• build-上記のタスクのエイリアス
• デフォルト - ビルドタスクのエイリアス

ここで、必要なNode.jsパッケージとJavaScript依存関係をインストールする必要があります。このために次のコマンドを実行します。

 npm install bower install
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

主な準備作業は終了しました。 Symfony2では、アプリケーション環境に応じてクライアントパーツのソースコードを提供し、r.jsオプティマイザーのかなり単純な構成を記述する方法について説明します。 次のようにやってみましょう：



src / AppBundle / Resources / views / Default / index.html.twig

 {% extends "AppBundle::layout.html.twig" %} {% block javascripts %} {% if app.environment == 'prod' %} <script src="{{ asset('app/dist/main.js') }}"></script> {% else %} <script>var require = {urlArgs: 'bust=' + (new Date()).getTime()};</script> <script data-main="app/main" src="{{ asset('app/vendor/requirejs/require.js') }}"></script> {% endif %} <script> requirejs.config({ config: { 'src/config': { user: { id: 1, username: 'John Doe' } } } }); </script> {% endblock %}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、クライアント部分がファイルシステムに何らかの構造を持っていることに注意する必要があります。質問を少なくするために、それについて簡単に要約します。 ソースは、パブリックWebディレクトリ、つまりweb / appディレクトリにあり、次の構造を持っています。

 ├── app.build.js ├── dist │  └── .gitkeep ├── main.js ├── specs │  └── .gitkeep ├── src │  ├── app.js │  └── config.js └── vendor
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

RequireJSの構成を追加する



web / app / main.js

 requirejs.config({ baseUrl: 'app' }); require([ 'src/app', 'src/config' ], function (App, config) { App.start(config); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

r.jsオプティマイザーの構成を追加する



web / app / app.build.js

 ({ baseUrl: '.', mainConfigFile: 'main.js', wrapShim: true, name: 'vendor/almond/almond', include: 'main', out: 'dist/main.js', findNestedDependencies: true, preserveLicenseComments: false })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

example.build.jsファイルで各パラメーターの詳細を読むことができます。

簡単なHelloアプリケーションを作成しましょう。



web / app / src / app.js

 define([ ], function () { 'use strict'; var App = {}; App.start = function (config) { console.log('Hello, ' + config.user.username + '!'); }; window.App = App; return App; });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

web / app / src / config.js

 define([ 'module' ], function (module) { 'use strict'; return module.config(); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Symfony2では、Symfony Standard Editionを使用する例では、コントローラーで追加の編集が必要になる場合があります。

ブラウザでアプリケーションのメインページを開くと、ブラウザコンソールに「Hello、John Doe！」というメッセージが表示されます。



prod環境のクライアントパーツをビルドするには、展開に次のコマンドを追加します。

 npm install bower install gulp build --env=prod
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、次の行を.gitignoreに追加することを忘れないでください。

 /bower_components/ /node_modules/ /web/app/dist/ /web/app/vendor/ /r.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

できた！



PSこのHelloアプリケーションの例は、GitHubのsymfony-standardリポジトリにあります。