ノードJSのWebpackエイリアスサーバコード

Question

私は同形のReact/React-Router/Redux/Webpackアプリケーションを構築していますが、サーバー側のレンダリングを実装しようとしています。

私のディレクトリは次のようになります。私のWebPACKの設定では

/client 
    /actions 
    /components 
    /containers 
/server 
    /server.js 

、私はクライアント内のすべてのフォルダの設定エイリアスを持っている：

var path_base = path.resolve(__dirname, '..'); 
const resolve = path.resolve; 
const base = function() { 
    var args = [path_base]; 
    args.push.apply(args, arguments); 
    return resolve.apply(resolve,args); 
}; 
const resolve_alias = base.bind(null, 'src/client'); 
const aliases = [ 
    'actions', 
    'components', 
    'constants', 
    'containers', 
    'middleware', 
    'reducers', 
    'routes', 
    'store', 
    'styles', 
    'utils', 
    'validation' 
]; 

コード内のWebPACKで束ねますそのように私はできます：

import { Widget } from 'components'; 

そしてインポートはwebpackによって解決されます。

私のサーバーコードでは、レンダリングを行うために、routes/index.jsのようなクライアントファイルの一部をインポートする必要があります。ルートファイルをインポートするときに実行している問題、別のファイルにwebpackエイリアスを使用している、つまりcomponentsまたはcontainersと言うように、ノードjsはシステムがそれを解決できないことを自然に要求します。

どうすれば修正できますか？私はthis questionを見て、基本的にはwebpackにある同じエイリアスをmock-requireで設定することについて話します。しかし、問題は、ルートファイルがすべてのコンポーネントをインポートし、スタイルシート、イメージなどのすべてをインポートすることになります。webpack-isomorphic-toolsのようなものを使用する必要がありますか？私は（例えばthis）で見てきた

ガイドは、サーバ側のレンダリングが行われる様子は全く素晴らしいですが、それらのどれもが本当にすべて必要とし、その他もろもろ解決する方法について話していません。

Answer 1

あなたが本当にそれらを望むなら、babelを通してサーバー側のコードを実行し、このプラグインを使用してください：https://www.npmjs.com/package/babel-plugin-module-aliasこれはwebpackと同じことをさせるでしょう。

編集：この1つはかなり良く動作します。https://github.com/jagrem/babel-resolve-relative-moduleそれは複数のパス

Answer 2

がNODE_PATHを使用してみてくださいことができます。ノードは、必要なコール中に常にこのパスのモジュールを探します。それはあなたが望むように、あなたの相対的なパスを短くカットすることができます。

// turn this 
import {Widget} from '../../components'; 

// into this 
import {Widget} from 'components'; 

詳細については、Node.js docsを参照してください。

P.S.この物は非常に敏感ですので、注意深く使用してください。コードは環境に密接に依存し、どこかで壊れる可能性があります。

Answer 3

この問題で2日間戦った後、私はbabel-plugin-webpack-aliasで解決しました。それにパスを解決するための What you need to doは次のとおりです。

1. $ npm install --save-dev babel-plugin-webpack-alias
2. は
3. あなた.babelrcにプラグインを追加するには、WebPACKのにエイリアスを追加します。設定（あなたがpath.join()を使用してください）あなたは、私が試した他のオプションはuniversal-webpackた問題ロードスタイル

を持っている場合

がthis postを参照してくださいが、私はそれは少し冗長であることが判明。おおよそのサーバーサイドローディングがどのように機能するかを確認するには、this videoをチェックしてください。

Answer 4

webpack-isomorphic-toolsを使用すると、webpackの設定がサーバー側で考慮され、すべてのエイリアスが機能します。

https://www.npmjs.com/package/webpack-isomorphic-tools