web-dev-qa-db-ja.com

Symfony 2、React、Webpack、Sassを使用するアプリのフォルダー構造？

私はSymfony2のいくつかのコンポーネントをReact、Webpack、Sassとともに使用するアプリを作成しています。主にPHPでコーディングし、その他の機能はアプリに機能を追加します。フォルダ構造の作成方法を理解するのに苦労しています。

アプリをSymfonyに完全に依存するのではなく、その一部のみを使用するアプリにしたいことに注意してください。

Symfony、 Html5 Boilerplate 、および Ryan Florence からのインスピレーション。

root
├── app
│   ├── console
│   ├── cache
│   ├── config
│   ├── logs
│   └── Resources
│       └── views (Twig files)
│       └── sass
├── src
│   └── AppBundle
├── vendor (Composer dependencies)
│   └── phpUnit
├── components (Bower dependencies)
│   └── Foundation
└── web
    ├── css
    │   ├── main.css
    │   └── normalize.css
    ├── doc
    ├── img
    ├── js
    │   ├── config
    │   │   └── routes.js
    │   ├── screens
    │   │   └── App
    │   │       ├── components
    │   │       ├── screens
    │   │       │   ├── Admin
    │   │       │   │   ├── components
    │   │       │   │   ├── screens
    │   │       │   │   │   ├── Reports
    │   │       │   │   │   │   ├── components
    │   │       │   │   │   │   ├── stores
    │   │       │   │   │   │   │   └── ReportsStore.js
    │   │       │   │   │   │   └── index.js
    │   │       │   │   │   └── Users
    │   │       │   │   │       ├── components
    │   │       │   │   │       └── index.js
    │   │       │   │   ├── shared
    │   │       │   │   │   └── stores
    │   │       │   │   │       ├── AccountStore.js
    │   │       │   │   │       └── UserStore.js
    │   │       │   │   └── index.js
    │   │       ├── shared
    │   │       │   └── components
    │   │       │       ├── Avatar.js
    │   │       │       └── Icon.js
    │   │       └── index.js
    │   └── shared
    │       └── util
    │           └── createStore.js
    ├── index.js
    ├── .editorconfig
    ├── .htaccess
    ├── 404.html
    ├── Apple-touch-icon.png
    ├── browserconfig.xml
    ├── index.html
    ├── humans.txt
    ├── robots.txt
    ├── crossdomain.xml
    ├── favicon.ico
    ├── tile-wide.png
    └── tile.png

質問をより明確にするために更新

Symfonyをバックエンドとして、ReactやWebpackなどをフロントエンドとして使用するアプリが欲しいのですが。フロントエンドとバックエンドを分離しておく必要があります。私はSymfonyが提案するフォルダー構造に完全に反対しているわけではありませんが、それを使用することで、フロントエンドとバックエンドが分離されていません。

他の人々がSymfonyを使用するアプリを作成したが、それをフロントエンドから完全に分離したことを知っています。 Symfonyバックエンドをフロントエンドから分離することを可能にするために、他の人が提案および/または使用するフォルダー構造は何ですか？

コードの依存関係を分離することはフォルダー構造だけにとどまらないことを私は理解していますが、一方を他方なしで持つことはかなり難しいと思います。また、分離に成功した別の人のフォルダー構造を見るだけで、詳細に詳しく説明することなく、他の人がどのようにそれを行ったかがわかります。

phpjavascriptweb-applicationsapplication-designdirectory-structure
3
GreeKatrina

アプリをSymfonyに完全に依存するのではなく、その一部のみを使用するアプリにしたいことに注意してください。

私の提案は、Symfony2アプリケーションを独立したRESTfulバックエンドにすることです。フロントを完全に分離して構築します。

ただし、この2つを組み合わせたい場合は、おそらく「app/Resources」の下にフォルダーを作成します（例：client）。あなたのjs/scssをそこに入れてください。大まかな例：

app/Resources/client/app.js
app/Resources/client/styles/*.scss
app/Resources/client/components/component1/main.js

Webpack.config.jsをpackage.jsonと一緒にSymfony2アプリケーションのルートフォルダーに配置します。 webpackエントリポイントをapp/Resources/clientフォルダーに設定します。次に、「web/dist/app.bundle.js」などのターゲットビルドを作成します。次に、それをapp/Resources/layout.html.twigに含めるだけです。それが単一ページのアプリケーションでない場合、複数のバンドルを持つこともできます。

すでに確立されているSymfony2プロジェクトにBackboneを後から追加する必要がありました。 WebpackとCommonJSは、JavaScriptを整理し、フロントエンドコードを整理して展開しやすくするのに非常に役立ちました。

これがwebpackの設定です。これは既存のプロジェクトに追加する必要があるため、外部セクションは無視してかまいません。特定のライブラリは既に必要であるため、外部でロードすることにしました。

var path = require('path');
var webpack = require('webpack');

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
    filename: 'common.bundle.js'
});

var uglifyPlugin = new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false
    }
});

var providePlugin =
    new webpack.ProvidePlugin({
        Backbone: 'backbone'
});

var modulePlugins = [commonsPlugin, providePlugin];
if (process.env.NODE_ENV === 'prod') {
    modulePlugins.Push(uglifyPlugin);
}

module.exports = {
  entry: {
    app: path.resolve(__dirname, 'app/Resources/modules/layout/app'),
    primers: path.resolve(__dirname, 'app/Resources/modules/primer/app'),
    // sample: path.resolve(__dirname, 'app/Resources/modules/sample/app'),
    cnv_batches: path.resolve(__dirname, 'app/Resources/modules/cnv/app_batches'),
    cnv_samples: path.resolve(__dirname, 'app/Resources/modules/cnv/app_samples'),
    ngs_batches: path.resolve(__dirname, 'app/Resources/modules/ngs/app_batches'),
    ngs_sample: path.resolve(__dirname, 'app/Resources/modules/sample/app_ngs'),
    sample_cnv: path.resolve(__dirname, 'app/Resources/modules/sample/app_cnv')
  },
  resolve: {
    root: path.resolve(__dirname, 'app/Resources/modules'),
    extensions: ['', '.js', '.css', '.scss', '.html']
  },
  output: {
    path: path.resolve(__dirname, 'web/dist'),
    filename: "[name].bundle.js"
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel' },
      { test: /\.css$/, loader: 'style!css' },
      { test: /\.scss$/, loader: 'style!css!sass' },
      { test: /\.html$/, loader: "underscore-template-loader" }
    ]
  },
  externals: {
    "jquery": "jQuery",
    "datatables": "$.fn.DataTable",
    "lodash": "_",
    "Routing": "Routing"
  },
  plugins: modulePlugins
};

最初からやり直すことができれば、2つを完全に分離して、RESTful Syfmony2アプリケーションをフロントエンドから完全に分離して構築します。それが選択肢である場合、それが私の最終的な推奨事項です。

幸運を。

2
Hines Bourne