I would like to convert my HTML5 game to iOS/Android app, I can do it using Phonegap or Cocoon, all tutorials show that we must include cordova.js file into index.html page.
If I include cordova.js as suggested:
<html>
<head>
<script src="cordova.js"></script>
<script src="js/phaser.min.js"></script>
<script src="js/game.js"></script>
</head>
</html>
I can see this message:
_Uncaught ReferenceError: require is not defined at cordova.js:28_
Also, I have uploaded a project to web server and I get same results. Downloaded cordova from here
https://github.com/apache/cordova-js/blob/master/src/cordova.js
It appears that you just copied the cordova.js file straight from GitHub and included it in your project manually.
If you want to use Cordova you should instead be using Node.js to create your project and define your platforms. This in turn will include the full cordova.js file, which includes the require() function.
Create your first Cordova app on the official site includes a basic tutorial on getting started, and GameDev Academy has a tutorial on Creating Mobile Games with Phaser 3 and Cordova.
Essentially, once you have Cordova tools and requirements installed:
cordova create projectName to create the new project.
cd projectName to move into the new project directory.
cordova platform add android and/or whatever platforms you want your game to run on.
Update the www directory as you normally would for a Phaser game. You can follow the GameDev Academy tutorial and use Node.js to install Phaser, or just copy/paste the JS file, whichever you're more comfortable with.
cordova build to make sure everything builds.
cordova emulate android to test it in Android, for example, but change as needed for your particular environments.
It seems to be a lame question, but I cannot figure it out. How to import popper.js which comes together with Bootstrap 4 beta?
I use Bower, and I've installed Bootstrap 4 beta. Now in the bower_components folder, there is the popper.js directory, which contains a few sub-folders. The problem is there is no dist folder and the popper.min.js file.
Bootstrap 4 guide links to CDN: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js.
How to import popper.js without CDN? Where to find the popper.min.js file?
EDIT: Even if I download a zip file from the popper.js website, it contains the same files as I've downloaded from Bower.
I ran into the same problem.
I downloaded the 'popper.min.js' file from the CDN on the bootstrap website.
See here: https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/cjs/popper.min.js
Easier than compiling the project.
Important: You must include popper after jquery but BEFORE bootstrap.
The official way to install Popper.js is trough npm, Yarn or NuGet.
Use either one of the following commands :
npm i popper.js
yarn add popper.js
PM> Install-Package popper.js
Everything is described in the library readme.
Regarding the "downloads the zip", the zip clearly states that it contains the source code of the library.
Edit:
Starting from version 1.12.0, Popper.js is available as Bower dependency.
This installation method is going to be supported only for the 1.x version of Popper.js and will be removed in 2.x.
You should migrate your dependencies management to a modern system like npm or Yarn, as Bower suggests as well.
Ways to get popper.js: Package, CDN, and Local file
The best way depends on whether you have a project with a package manager like npm.
Package manager
If you're using a package manager, use it to get popper.js like this:
npm install popper.js --save
CDN
For a prototype or playground environment (like http://codepen.io) or may just want a url to a CDN file:
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js
note: Bootstrap 4 requires the versions under the umd path (more info on popper/bs4).
Local file
Just save one of the CDN files to use locally. For example, paste one of these URLs in a browser, then Save As... to get a local copy.
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js
I had the same problem. Tried different approches, but this one worked for me.
Read the instruction from http://getbootstrap.com/.
Copy the CDN paths of Javascripts (Popper, jQuery and Bootstrap) in same manner (it is important) as given.
<head>
//Path to jQuery
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
////Path to Popper - it is for dropsdowns etc in bootstrap
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
//Path to bootsrap
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
I really don't understand why Javascript world trying to do thing more complicated. Why not just download and include in html? Trying to have something like Maven in Java? But we have to manually include it in html anyway? So, what is the point? Maybe someday I will understand but not now.
This is how I can get it
download & install NodeJs
run "npm install popper.js --save"
then I get this message
popper.js#1.12.7
added 1 package in 1.215s
then where is "add package" ? very informative , right? I found it in my C:\Users\surasin\node_modules\popper.js\dist
Hope this help
IN bootstrap 4 you need to add popper js for tooltip, I also don`t understand why bootstrap 4 includes external popper.js, It means bootstrap makes more complicated instead of easy when upgrading to the latest versions.
You can import popper js before bootstrap on angular or a simple html, Angular import would be like this
npm install popper.js --save
then go to
.angular-cli.json and change the order like below.
"scripts": [
"../node_modules/jquery/dist/jquery.slim.min.js",
"../node_modules/tether/dist/js/tether.min.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
you can also use CDN direct call popper js into your any project.
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js
add popper**.js** as dependency instead of popper (only): see the difference in bold.
yarn add popper.js , instead of
yarn add popper
it makes the difference.
and include the script according your needs:
as html or
the library access as a dependency in SPA applications like react or angular
first install propperJs from by yarn
yarn add popper.js
then you can import it like this
import Popper from "popper.js";
I deleted any existing popper directories, then ran
npm install --save popper.js angular-popper
It turns out that Popper.js doesn't provide compiled files on its GitHub repository. Therefore, one has to compile the project on his/her own or download compiled files from CDNs. It cannot be automatically imported.
You can download and import all of Bootstrap, and Popper, with a single command using Fetch Injection:
fetchInject([
'https://npmcdn.com/bootstrap#4.0.0-alpha.5/dist/js/bootstrap.min.js',
'https://cdn.jsdelivr.net/popper.js/1.0.0-beta.3/popper.min.js'
], fetchInject([
'https://cdn.jsdelivr.net/jquery/3.1.1/jquery.slim.min.js',
'https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js'
]));
Add CSS files if you need those too. Adjust versions and external sources to meet your needs and consider using sub-resource integrity checking if you're not hosting the files on your own domain or don't trust the source.
Install popper.js with spesific version number like this:
bower install popper.js#^1.16.0
Now u can find dist folder and popper.min.js file.
I created a new Foundation project using npm and I need to add a lightbox plugin. Adding an external JS file to the previous version of Foundation was as simple as linking it in the config.yml file. The new version of Foundation uses the module bundler Webpack which I am unfamiliar with. I tried following these instructions but did not have any success and ended up with a Jquery is not defined error.
I dropped the minified lightbox plugin in the /lib directory and tried linking the file in the app.js and config.yml files but also had no success. Any assistance would be greatly appreciated.
I think you can solve adding:
window.jQuery = $;
and call the file externally as you're doing.
That's the quick solution.
To add to the webpack build it's something I'm still unsure (if the plugin is not and exported module by default)
inculded angular-google-places-autocomplete in my project for places autocomplete using
bower install angular-google-places-autocomplete
shows an error in the console
Global `google` var missing. Did you forget to include the places API script?
following the kuhnza/angular-google-places-autocomplete documentation included below script manually in the index.html
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
then every works fine , but when moving to production app is build using grunt build then minified and uglified files are created the the same error reappears.
i think the manually added script is removed during building the app.
what to do to solve this issues.how to include this google places api in application properly.Thanks in advance
You need to move your script for google api call before your build:js in the index.html declaration
thanks for your time! I am battling to get any scripts running in the Ionic framework's sidemenu starter template. I have placed them everywhere (except where they're supposed to be, clearly) but to no avail. I have tried loading them before ionic and also using a lower version of jquery. I have built a decent mobile site with jquery that I've pushed through phonegap and it works perfectly but I would like to use Ionic as a personal challenge. However, I can't seem to get any of the scripts I'm using to work.
Do I include them in the main index file and if so, do they get loaded when each template instantiates? Or must I include them in each of the templates? If you could please be quite specific as to where in the folders I should place them (if indeed there is a specific place) and also where I should call the scripts.
I installed ionic using this yeoman generator https://github.com/diegonetto/generator-ionic if that helps.
If I have note been clear enough please comment and I will elaborate further.
Thank you for your patience - J
I know this is old, but for those who are struggling with this for Ionic 2, add script files to src/assets/scripts, then refer to them via a script tag in src/index.html (not the one in www). When it builds, everything in src/assets will be copied to www/assets, including your scripts. index.html will also be copied to www.
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<script src="assets/scripts/openpgp/openpgp.js"></script>
<script src="assets/scripts/openpgp/openpgp.worker.js"></script>
I would add any scripts such as jquery either just before or just after the script tag for cordova. This is in index.html located within the app/ directory of the project that running the yeoman generator created.
<!-- Place scripts such as JQuery here -->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="scripts/config.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
Once you have placed the scripts here they will get called when the app runs, and libraries such as jquery will be available globally throughout the app. I hope this helps.
As nice listed by a user here https://github.com/ionic-team/ionic/issues/9422
Install latest ionic
Start your project
Go to /src/
open the assets folder
create a /js/ folder inside assets
copy your .js inside this js folder
goto /src/index.html
Add your path
Go to your typescript file of choice and declare var N;
N.yourFunction
ionic serve