包含带有 React 的 Phaser JS，PIXI 未定义错误答案

【问题标题】：Include Phaser JS with React, PIXI not defined error包含带有 React 的 Phaser JS，PIXI 未定义错误
【发布时间】：2017-08-12 01:02:01
【问题描述】：

我正在尝试将 Phaser JS 包含在 React 组件中，但在加载 Webpack 时返回“未捕获的 ReferenceError：PIXI 未定义”错误。这是我的 Webpack 配置文件：

var path = require('path');
var projectRoot = path.resolve(__dirname, '../');
var phaserModule = path.join(__dirname, '/node_modules/phaser/');
var phaser = path.join(phaserModule, 'build/custom/phaser-split.js'),
    pixi = path.join(phaserModule, 'build/custom/pixi.js'),
    p2 = path.join(phaserModule, 'build/custom/p2.js');

module.exports = {
  entry: {
    app: ['./src/polyfills.js', './src/main.js'],
    vendors: ['react', 'react-dom', 'react-redux', 'redux', 'react-router', 'history', 'react-f1'],
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/',
    filename: '[name].js',
  },
  /**
  resolve: {
    extensions: ['', '.js'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'src': path.resolve(__dirname, '../src'),
    },
  },
  resolveLoader: {
    fallback: [path.join(__dirname, '../node_modules')],
  },
   **/
  module: {
    /**
    preLoaders: [
      {
        test: /\.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/,
      },
    ],
     **/
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: projectRoot,
        exclude: /node_modules/,
      },
      {
        test: /\.json$/,
        loader: 'json',
      },
      {
        test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
        loader: 'url',
        query: {
          name: '[name].[ext]?[hash:7]',
        },
      },
      {
        test: /\.(mp4|webm)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: '[name].[ext]?[hash:7]',
        },
      },
      {
        test: /pixi\.js/,
        loader: 'expose?PIXI'
      },
      {
        test: /phaser-split\.js$/,
        loader: 'expose?Phaser'
      },
      {
        test: /p2\.js/,
        loader: 'expose?p2'
      },
    ]
  },
  resolve: {
    alias: {
      'phaser': path.join(phaserModule, 'build/custom/phaser-split.js'),
      'pixi': path.join(phaserModule, 'build/custom/pixi.js'),
      'p2': path.join(phaserModule, 'build/custom/p2.js'),
    }
  },
  /**
  postcss: function () {
    return [precss, autoprefixer(AUTOPREFIXER_BROWSERS)];
  },
  eslint: {
    formatter: require('eslint-friendly-formatter'),
  },
   **/
}

下面是我如何将 Phaser 导入到我的组件中：

import React, { Component } from 'react';
import { Link } from 'react-router';
import cookie from "react-cookie";
import pixi from 'phaser';
import p2 from 'phaser';
import Phaser from 'phaser';

我正在使用这个 NPM 包：https://www.npmjs.com/package/phaser

提前感谢您的帮助:)

【问题讨论】：

标签： javascript reactjs webpack phaser-framework

【解决方案1】：

您的公开加载程序配置看起来与文档 @https://github.com/webpack-contrib/expose-loader 不同

您确定要在 React 组件中使用 Phaser 吗？这似乎是不必要的复杂性，因为 Pixi 和 React 都希望完全拥有渲染的所有权..

【讨论】：