5

ブラウザーとサーバーの両方で実行される同形の React アプリケーションがあります。2 つの異なるエントリ ポイントと異なる構成で 2 つの別個の Webpack ビルドを実行することで、両方に同じコードをビルドします。

問題は、外部スクリプト タグ (この例では Google マップ) を介してブラウザ ウィンドウに存在する外部ファイルが、サーバー上のノードで実行されている場合、明らかに存在しないことです。コードは、エントリ ポイント ファイルを除いて同じです。

index.html:

// index.html
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXX"></script>

簡素化された構成:

// Server Webpack config
{
    entry: 'server.js',
    target: 'node',
    externals: {
         google: google
    }
}

// Client Webpack config
{
    entry: 'client.js',
    target: 'browser',
    externals: {
         google: google
    }
}

コンポーネント:

// The view which builds and runs fine in 
// the client but doesn't run on the server.
var React = require('react'),
    css = require('./style.css'),
    google = require('google'); // Nope, not on the server obviously!

var Component = React.createClass({

    render: function () {
        return (
            <div>
                // Do maps stuff
            </div>
        );
    }

});
module.exports = Component;

私の質問は、これをどのように処理すればよいですか?

Error: Cannot find module 'google'

私は現在、まったく熱心ではない解決策を持っています。

// Server Webpack config
{
    entry: 'server.js',
    target: 'node',
    externals: {
         google: google
    },
    plugins: [
        new webpack.DefinePlugin({ 'ENV.browser': false }),
    ]
}

// Client Webpack config
{
    entry: 'client.js',
    target: 'browser',
    externals: {
         google: google
    },
    plugins: [
        new webpack.DefinePlugin({ 'ENV.browser': true }),
    ]
}

// The component
var React = require('react'),
    css = require('./style.css');

if (ENV.browser) {
    var google = require('google');
}

var Component = React.createClass({

    render: function () {
        return (
            <div>
                if (ENV.browser) {
                    // Do maps stuff
                }
            </div>
        );
    }

});
module.exports = Component;
4

1 に答える 1

5

Dustan KastenNormalModuleReplacementPluginのアイデアに従って、モジュールを noop に置き換えるために使用できます。

{
  plugins: [
    new webpack.NormalModuleReplacementPlugin(/^google$/, 'node-noop'),
  ],
}
于 2015-05-14T20:40:37.167 に答える