2

私が開発しているReactアプリケーションを同形にしようとしています。これを行う際の既知の問題の 1 つは、webpack ローダーがimport/requireCSS ファイルなどの非 JavaScript アセットを許可することです。例えば

// ExampleComponent.jsx
import Select from 'react-select';
import 'react-select/dist/react-select.css';

babel-registerExpress でアプリケーションを構築する場合、ノードはこのインポートに到達し、CSS ファイルを処理できないため失敗します。JavaScript のみを想定しています (そしてJSXのおかげです)。

これを回避する方法の 1 つはtarget: 'node'、サーバー アプリケーション (同形アプリであるため、コンポーネントなどのすべての共通部分を含む) をビルドするときに webpack のオプションを使用して、サーバー側のコードをビルドすることです。これにより、server.jsノードで実行できるビルドが作成されます。

注: この特定の問題を回避する方法が他にもあることは知っています ( import/requireJavaScript 以外のものを含めないようにするなど)。ただし、このアプリケーションの開発のこの段階では実用的ではありません。

// webpack.config.js
var webpack = require('webpack');
var path = require('path');

module.exports = [
  // Client build
  {
    entry: {
      'bundle.min': [
        'bootstrap-webpack!./bootstrap.config.js',
        'babel-polyfill',
        './client/index.jsx'
      ],
      'bundle': [
        'bootstrap-webpack!./bootstrap.config.js',
        'babel-polyfill',
        './client/index.jsx'
      ]
    },
    output: {
      path: './dist',
      filename: '[name].js'
    },
    plugins: [
      new webpack.optimize.UglifyJsPlugin({
        include: /\.min\.js$/,
        minimize: true
      })
    ],
    module: {
      loaders: [
        {
          test: /\.jsx$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            plugins: ['transform-runtime'],
            presets: ['react', 'es2015', 'stage-0']
          }
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            plugins: ['transform-runtime'],
            presets: ['es2015', 'stage-0']
          }
        },
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader'
        },
        { test: /\.png$/,
          loader: "url-loader?limit=100000"
        },

        // Bootstrap
        {
          test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url?limit=10000&mimetype=application/font-woff'},
        {
          test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url?limit=10000&mimetype=application/octet-stream'
        },
        {
          test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'file'
        },
        {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url?limit=10000&mimetype=image/svg+xml'
        }
      ]
    },
    resolve: {
      extensions: ['', '.js', '.jsx', '.json']
    }
  },

  // Server build
  {
    entry: './server/server.jsx',
    target: 'node',
    node: {
      console: false,
      global: false,
      process: false,
      Buffer: false,
      __filename: false,
      __dirname: false,
    },
    output: {
      path: './dist',
      filename: 'server.js',
    },
    module: {
      loaders: [
        {
          test: /\.jsx$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            plugins: ['transform-runtime'],
            presets: ['react', 'es2015', 'stage-0']
          }
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            plugins: ['transform-runtime'],
            presets: ['es2015', 'stage-0']
          }
        },
        {
          test: /\.json$/,
          loader: 'json-loader'
        },
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader'
        },
        { test: /\.png$/,
          loader: "url-loader?limit=100000"
        },

        // Bootstrap
        {
          test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url?limit=10000&mimetype=application/font-woff'},
        {
          test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url?limit=10000&mimetype=application/octet-stream'
        },
        {
          test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'file'
        },
        {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url?limit=10000&mimetype=image/svg+xml'
        }
      ]
    },
    resolve: {
      extensions: ['', '.js', '.jsx', '.json']
    }
  }
];

問題は、スタイルローダーがwindowノード環境に明らかに存在しないものを利用することです。

$ node dist/server.js
/Users/dpwrussell/Checkout/ExampleApp/dist/server.js:25925
            return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
                                       ^

ReferenceError: window is not defined

ここからスタイルローダーで。

私はこの仕事をするのに非常に近いと感じているので、どんな考えでも大歓迎です.

4

1 に答える 1

2

答えはstyle-loader、サーバー ビルドで使用しないことです。その唯一の目的は、CSS を<style>要素に変換し、DOM に挿入することです。ほとんどの人は、ExtractTextPluginを使用して、サーバー側に含める CSS を収集しているようです。

于 2016-03-15T22:27:27.657 に答える