Comments (10)
//Edit
Previously I had problems with my last configuration so I just deleted and start over again.
I follow the steps from@Dreaded-Gnu editing the webpack.cofig.js file from node_modules/@ionic/app-scripts/config
I had to do some changes to make it works.
firstly I change the rootDir variable to path.resolve('node_modules');
and install expose-loader with npm i expose-loader --save
.
I want to use the webpack.config file from my root directory of the project but I got the following error message.
my webconfig.js file
var path = require('path');
var webpack = require('webpack');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);
var node_modules = path.resolve('node_modules'),
phaser_module = path.join(node_modules, "phaser-ce"),
phaser = path.join(phaser_module, "build", "custom", "phaser-split.js"),
pixi = path.join(phaser_module, "build", "custom", "pixi.js"),
p2 = path.join(phaser_module, "build", "custom", "p2.js");
module.exports = {
entry: process.env.IONIC_APP_ENTRY_POINT,
output: {
path: '{{BUILD}}',
publicPath: 'build/',
filename: process.env.IONIC_OUTPUT_JS_FILE_NAME,
devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
},
devtool: process.env.IONIC_SOURCE_MAP_TYPE,
resolve: {
extensions: ['.ts', '.js', '.json'],
modules: [path.resolve('node_modules')],
alias: {
"pixi": pixi,
"p2": p2,
"phaser-ce": phaser
}
},
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
},
// new for exposing pixi, correct phaser and p2 into global scope (begin)
{
test: /pixi\.js/,
loader: "expose-loader?PIXI"
},
{
test: /phaser-split\.js/,
loader: "expose-loader?Phaser"
},
{
test: /p2\.js/,
loader: "expose-loader?p2"
},
{
test: /\.ts$/,
loader: process.env.IONIC_WEBPACK_LOADER
}
]
},
plugins: [
ionicWebpackFactory.getIonicEnvironmentPlugin(),
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
}
};
Also @Dreaded-Gnu I don't understand what did you mean with webpack-merge, could you explain it please?
N.T
I run my serve with ionic serve -w ./webpack.config.js. I don't know if it is correct because ionic-app-scripts serve don't work for me.
Sorry for my bad English and I hope this helps someone.
from phaser-ce.
Normally, when using webpack only, the following import should be okay, when correctly configured: import * as Phaser from 'phaser-ce';
Ionic2 and webpack is importing the wrong file. You've to extend the webpack configuration:
- Copy following file into your project and extend it:
node_modules/@ionic/app-scripts/config/webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);
// new, necessary for resolving to correct files (begin)
var rootDir = path.resolve(__dirname),
phaser_module = path.join(rootDir, "node_modules", "phaser-ce"),
phaser = path.join(phaser_module, "build", "custom", "phaser-split.js"),
pixi = path.join(phaser_module, "build", "custom", "pixi.js"),
p2 = path.join(phaser_module, "build", "custom", "p2.js");
// new, necessary for resolving to correct files (end)
module.exports = {
entry: process.env.IONIC_APP_ENTRY_POINT,
output: {
path: '{{BUILD}}',
publicPath: 'build/',
filename: process.env.IONIC_OUTPUT_JS_FILE_NAME,
devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
},
devtool: process.env.IONIC_SOURCE_MAP_TYPE,
resolve: {
extensions: ['.ts', '.js', '.json', '.js'], // <-- extended by considering also extension '.js'
modules: [path.resolve('node_modules')],
// new for alias resolve (begin)
alias: {
"pixi": pixi,
"p2": p2,
"phaser-ce": phaser
}
// new for alias resolve (end)
},
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
},
// new for exposing pixi, correct phaser and p2 into global scope (begin)
{
test: /pixi\.js/,
loader: "expose-loader?PIXI"
},
{
test: /phaser-split\.js/,
loader: "expose-loader?Phaser"
},
{
test: /p2\.js/,
loader: "expose-loader?p2"
},
// new for exposing pixi, correct phaser and p2 into global scope (end)
{
test: /\.ts$/,
loader: process.env.IONIC_WEBPACK_LOADER
}
]
},
plugins: [
ionicWebpackFactory.getIonicEnvironmentPlugin(),
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
}
};
Then you can easily import phaser ce by using following import statements:
import "pixi";
import "p2";
import * as Phaser from "phaser-ce";
For build process you then have to specify the webpack config file, because it won't be detected automatically as far as I've seen:
ionic-app-scripts serve -w ./webpack.config.js
We should consider adding it within the readme, or something else.
from phaser-ce.
Pretty sure that's not how you do it.
Go to your angular.cli.json file (or whatever ionic uses for webpack config) and add phaser script...
Then in your tsconfig.json file add the reference to the types.
This sometimes does not work for me and have to resort to triple slash type reference...
from phaser-ce.
I am receiving the same error as you. Were you able to get this working or no?
from phaser-ce.
No, I gave up of trying to use Ionic and Phaser using Typescript. Sorry :-/
from phaser-ce.
I fixed the phaser-ce module name for typescript a while back now, so it should not fail any longer with version 2.7.5.
If it still fails, please provide a sample application, so that the issue can be fixed
from phaser-ce.
I've updated phaser-ce to 2.7.5 and although the error is different, the application still doesn't work.
Importing like this
import {Phaser} from 'phaser-ce';
Results in
Module "phaser-ce" has no exported member 'Phaser'
Importing like this
import * as Phaser from 'phaser-ce';
results in
PIXI is not defined
I've created a repository in case you want to check it out:
https://github.com/esteban-filardi/phaser-test
I guess you should install ionic globally,
npm install -g cordova ionic
Then you can run:
ionic lab
to test the application.
from phaser-ce.
When you don't want to copy the webpack file, you could write a partial and use webpack-merge to merge the app scripts webpack config with the partial one of you.
Then you don't have to check on each update of ionic scripts package the webpack config again.
from phaser-ce.
Closing for #96
from phaser-ce.
I did as said by Dreaded-Gnu above.
After doing all the configuration, if I run ionic lab
its working with no error.
Then I tried to build the apk with ionic cordova build android --prod
this is throwing the following error:
Error: ./src/pages/home/home.js
Module not found: Error: Can't resolve 'pixi' in 'D:\PhoneGapProjects\firstgame\src\pages\home'
resolve 'pixi' in 'D:\PhoneGapProjects\firstgame\src\pages\home'
Parsed request is a module
using description file: D:\PhoneGapProjects\firstgame\package.json (relative path: ./src/pages/home)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\PhoneGapProjects\firstgame\package.json (relative path: ./src/pages/home)
resolve as module
Please any one help. I am stuck here.
from phaser-ce.
Related Issues (20)
- Multiple timers, but Timer.duration only returns to first one currently running HOT 2
- Different frame rate for each frame of an animation HOT 1
- Possible Bug in moving an image HOT 2
- bad performance in webGL version 2.15+ HOT 4
- Error thrown when destroying the game too early and using WebAudio HOT 8
- TweenManager.frameBased not working as expected HOT 1
- Game loop runs slow when setTimeout() is used HOT 1
- Why was createStaticLayer deprecated? HOT 1
- Adaptability enhancement: daltonization filter for people with colorblindness HOT 1
- The same page is very slow when I use phaser ce After v2.6.2, why? HOT 1
- Filters not rendering on Android or with multiTexture: true
- timer loop events in create function get error
- v2.19.1: WebGL: INVALID_OPERATION on game start HOT 1
- iOS 15.1 huge web-gl performance drop. HOT 1
- Image hover not working for first time if image was clicked HOT 1
- DOCS.md link path error HOT 1
- Cannot create and destroy games in quick succession HOT 5
- RenderTexture can crash if games are created and destroyed in quick succession. HOT 6
- Custom fonts render with glitches on certain Windows devices HOT 4
- Phaser CE API docs are offline HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from phaser-ce.