1

反応（es6）プロジェクトにwebpackを使用しています。

私の問題

私はES6 で反応アプリを構築したので、どこでも依存関係にimportキーワードを使用しました。サーバー側のレンダリングにはNodeJSを使用しているため、インポートはまだサポートされていません。このためには、 importの代わりにrequireを使用する必要があります。

アプリをバンドルするために webpack を使用しましたが、常に最終的なバンドル ファイル (single.bundle.js) を生成します。そのため、サーバー側のレンダリング用にトランスパイルされたコードのチャンクをインポートできません。

解決

すべてのファイル(src から dist)をトランスパイルできる場合は、この es5 ファイルを nodejs サーバー コードにインポートできます。

質問

これは webpack を使用して、バンドルファイルではなく同じ出力でフォルダー全体をトランスパイルすることは可能ですか?

それ以外の場合は、grunt または gulp を使用する必要があります。:(

4

1 に答える 1

2

サーバーにもwebpackを使用できます。反応を含み、外部オプションによってnode_modulesを除外する特定のコードのみをwebpackサーバーバンドルにトランスパイルします。これはサーバー側の例webpack.config.jsです

var nodeModules = {};
fs.readdirSync('node_modules')
    .filter(function(x) {
        return ['.bin'].indexOf(x) === -1;
    })
    .forEach(function(mod) {
        nodeModules[mod] = 'commonjs ' + mod;
    });

module.exports = {
    entry: './src/server.js', 
    output: {
        path: __dirname,
        filename: 'server.js'
    },
    target: 'node',
    node: {
        console: false,
        global: false,
        process: false,
        Buffer: false,
        __filename: false,
        __dirname: false,
    },
    externals: nodeModules,
}
于 2016-07-08T12:08:14.010 に答える