Giter Club home page Giter Club logo

Comments (10)

archagy avatar archagy commented on May 18, 2024 3

//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.

image

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.

Dreaded-Gnu avatar Dreaded-Gnu commented on May 18, 2024 2

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.

smatthews1999 avatar smatthews1999 commented on May 18, 2024

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...
image

Then in your tsconfig.json file add the reference to the types.
image

This sometimes does not work for me and have to resort to triple slash type reference...
image

from phaser-ce.

rpascal avatar rpascal commented on May 18, 2024

I am receiving the same error as you. Were you able to get this working or no?

from phaser-ce.

esteban-filardi avatar esteban-filardi commented on May 18, 2024

No, I gave up of trying to use Ionic and Phaser using Typescript. Sorry :-/

from phaser-ce.

Dreaded-Gnu avatar Dreaded-Gnu commented on May 18, 2024

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.

esteban-filardi avatar esteban-filardi commented on May 18, 2024

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.

Dreaded-Gnu avatar Dreaded-Gnu commented on May 18, 2024

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.

samme avatar samme commented on May 18, 2024

Closing for #96

from phaser-ce.

arijitnaskar avatar arijitnaskar commented on May 18, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.