Javascript 包括相位器JS和React,PIXI未定义错误
我试图在React组件中包含Phaser JS,但加载时Webpack返回“未捕获引用错误:未定义PIXI”错误。这是我的网页包配置文件:Javascript 包括相位器JS和React,PIXI未定义错误,javascript,reactjs,webpack,phaser-framework,Javascript,Reactjs,Webpack,Phaser Framework,我试图在React组件中包含Phaser JS,但加载时Webpack返回“未捕获引用错误:未定义PIXI”错误。这是我的网页包配置文件: var path = require('path'); var projectRoot = path.resolve(__dirname, '../'); var phaserModule = path.join(__dirname, '/node_modules/phaser/'); var phaser = path.join(phaserModule,
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'),
},
**/
}
以下是我如何将移相器导入我的组件:
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包:
提前感谢您的帮助:)您的expose loader配置与文档不同@ 您确定要在React组件中使用相位器吗?这似乎是不必要的复杂性,因为Pixi和React都希望完全拥有渲染权