複数の反応アプリを構築してコードとアセットを共有する方法

Question

次の構造を使用する反応アプリを構築しました。

node_modules 
src/ 
    app/ 
    index.ts 
    index.html 
    ... 
    server/ 
    index.ts 
    ... 
    node_modules/ // using the Alle pattern here 
    @<custom_packages> 
     api 
     components 

ここで新しいアプリを追加する必要があります。異なるドメインで動作しますが、できるだけ多くの共有コードを使用できるようにするには、カスタムパッケージが必要です。私の最初の試みは次のことでした。

node_modules 
src/ 
    app1/ 
    index.ts 
    index.html 
    ... 
    app2/ 
    index.ts 
    index.html 
    ... 
    server/ 
    index.ts // Uses ENV_VAR to serve a different bundle 
    ... 
    node_modules/ 
    @<custom_packages> 
     api 
     components 

私は今に実行している問題は、両方のアプリは、自分の資産などを生成するが、私は、クライアントがそれらをキャッシュできるように、アプリケーション間でそれらを共有したいということです。私は資産を構築するためにwebpackを使用せず、静的フォルダに入れるだけで、webpackのオフラインプラグインのサポートを失うことになります。

また、この場合はモノレポを使用することにしました。これは、CIの作成を大幅に困難にしていますが、共有コードの管理が非常に簡単です。このような状況に直面している熟練した開発者がいるかどうか、私は思っています。

基本的に、できるだけ多くのコードを共有する必要がある2つのアプリケーションを構造化するにはどうすればよいでしょうか？

Answer 1

同様の設定が必要でしたが、Angularの設定が必要でした。ここで私が持っているのWebPACKの設定は、（私は関連部分のみを残した）次のとおりです。私の場合は

const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

const apps = [ 
    { 
    name: 'app1', 
    baseUrl: '/app1' 
    }, 
    { 
    name: 'app2', 
    baseUrl: '/app2' 
    } 
]; 

module.exports = function (args = {}) { 
    const isDev = !args.PROD; 
    const distPath = 'dist'; 

    var config = {}; 

    config.entry = {}; 

    apps.forEach(function (app) { 
    config.entry[getAppBundleName(app)] = './src/apps/' + app.name + '/main.ts'; 
    }); 

    config.output = { 
    path: root(distPath), 
    filename: '[name].js', 
    chunkFilename: '[name].[chunkhash].js', 
    publicPath: '/dist/' 
    }; 

    config.resolve = { 
    extensions: ['.ts', '.js', '.json'], 

    modules: [root('src'), root('node_modules')] 
    }; 

    config.module = { 
    rules: [ 
     // Add your loaders here 
    ] 
    }; 

    config.plugins = [ 
    // Add your plugins here 

    // This enables tree shaking of the vendor modules 
    new CommonsChunkPlugin({ 
     name: 'vendor', 
     chunks: ['admin'].concat(apps.map(getAppBundleName)), 
     minChunks: module => /node_modules/.test(module.resource) 
    }), 
    new CommonsChunkPlugin({ 
     name: 'shared', 
     chunks: ['admin'].concat(apps.map(getAppBundleName)), 
     minChunks: module => /src(\\|\/)shared/.test(module.resource) 
    }) 
    ]; 

    apps.forEach(function (app) { 
    var otherApps = apps.slice(); 

    var appItemIndex = otherApps.indexOf(app); 

    if (appItemIndex > -1) { 
     otherApps.splice(appItemIndex, 1); 
    } 

    config.plugins.push(new HtmlWebpackPlugin({ 
     template: 'index_template.html', 
     title: app.name, 
     filename: getAppDevServerHtmlFileName(app), 
     excludeChunks: otherApps.map(getAppBundleName), 
     chunksSortMode: 'manual', 
     chunks: ['vendor', 'shared', getAppBundleName(app)], 
     inject: 'head', 
     metadata: { 
     baseUrl: app.baseUrl 
     } 
    })); 
    }); 

    config.devServer = { 
    port: 4200, 
    stats: stats, 
    historyApiFallback: { 
     rewrites: apps.map(function (app) { 
     return { 
      from: new RegExp('^' + app.baseUrl), 
      to: '/dist/' + getAppDevServerHtmlFileName(app) 
     } 
     }), 
    }, 
    }; 

    return config; 
} 

function getAppBundleName(app) { 
    return app.name; 
} 

function getAppDevServerHtmlFileName(app) { 
    return app.name + '_index.html'; 
} 

function root(args) { 
    args = Array.prototype.slice.call(arguments, 0); 
    return path.join.apply(path, [__dirname].concat(args)); 
}` 

、私はあなたに似ている、以下のフォルダ構造、持っている：

node_modules 
src/ 
    apps/ 
    app1/ 
     ... 
     main.ts 
    app2/ 
     ... 
     main.ts 
    shared/ 
    shared-module1/ 
     ... 
    shared-module2/ 
     ... 
    index.ts 
    ... 
webpack.config.js 

をそしてここにありますdistフォルダ内のコンパイル後の出力：

dist/ 
    app1.js 
    app1_index.html 
    app2.js 
    app2_index.html 
    vender.js 
    shared.js 

あなたが見ることができるように、vendor.jsとshared.js、アプリ間の共有コードが含まれています。