Meteor React External JS Files - javascript

I have an HTML template which is bought from Themeforest, index.html of this template has js files included in the following order:
<!-- Scripts -->
<script src="js/vendor/jquery-2.1.0.min.js"></script>
<script src="js/helper.js"></script>
<script src="js/vendor/HeadsUp.js"></script>
<script src="js/vendor/chart.min.js"></script>
<script src="js/vendor/jquery.mixitup.min.js"></script>
<script src="js/vendor/jquery.swipebox.min.js"></script>
<script src="js/vendor/masonry.min.js"></script>
<script src="js/vendor/swiper.min.js"></script>
<script src="js/vendor/materialize.min.js"></script>
<script src="js/main.js"></script>
</body>
How and where should I include these external js files in my Meteor React application?

As mentioned in this meteor documentation, you can create a compatibility folder from on client.
This folder is for compatibility with JavaScript libraries that rely on variables declared with var at the top level being exported as globals. Files in this directory are executed without being wrapped in a new variable scope. These files are executed before other client-side JavaScript files.
It is recommended to use npm for 3rd party JavaScript libraries and use import to control when files are loaded.

Related

How do the <script> tags generated by the `firebase init` work and are they compatible with a bundler like Browserify?

I'm trying to use Firebase with Browserify and certain tools in that territory have trouble with the firebase script tags. I'm guessing it's because the Browserify bundles don't include those resources (specifically Beefy, the hot-reload browserify local-server-helper), so those resources aren't found. Because I don't quite understand how those script tags work to begin with, I'm having trouble accommodating for their functionality.
I'm talking about these things:
<!-- update the version number as needed -->
<script defer src="/__/firebase/7.17.2/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/7.17.2/firebase-auth.js"></script>
<script defer src="/__/firebase/7.17.2/firebase-database.js"></script>
<script defer src="/__/firebase/7.17.2/firebase-messaging.js"></script>
<script defer src="/__/firebase/7.17.2/firebase-storage.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
The comments are somewhat helpful. My attention is pointed to the firebase 'init' source, which I'm guessing takes all the scripts above it to initialize the firebase keyword that is then used later in .js files.
However, in a bundled environment, should I be doing this a different way than the CLI sets it up?
All of those script includes are only relevant if you're using Firebase products in web pages served by Firebase Hosting. The __ leading each path are reserved by Firebase Hosting for these types of scripts.
If you're not using Firebase Hosting, just remove them.
If you're using bundling software, just remove them, and instead import the Firebase libraries using whatever your bundler prefers.

Javascript files does not load in React

I included my external Javascript files in my index.html file, and for whatever reason it doesn't load, and no error is thrown.
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
I used the react-script-tag library.
I created a component that used the react-script-tag to include all the js files, and imported them in other components that needs them.

cant load external js file in html

I have tried all answers available but none can solve my problem. I have a html page in which I am drawing svg using js. now I want to store this js in external file and call it (my html and js files are in same folder).
<script src="show1.js"></script> on doing so, my internal js cannot find functions defined in external js and gives 'ReferenceError: DrawLine is not defined'. I even tried using alert in external js to check whether it was being loaded or not, but even alert is not working. is there any settings that i will have to check? kindly help.
My code is really huge. I am posting this snippet instead that shows the internal and external js.
<head>
<script>
//only variables are declared
<script>
</head>
<body>
<script src="show1.js"></script>
<script> drawline(10,10,20,20,'black',4); </script>
</body>
show1.js:
function drawline(x1,y1,x2,y2,c,w)
{
//do stuff
}
Note:these pages are part of django project, and so my html and js are stored in the template folder of the project.
you can use the static file app in django to serve external static files: https://docs.djangoproject.com/en/1.10/ref/contrib/staticfiles/
You can create a folder on you project to host your static assets (with the name static for example), then you need to configure your project to serve static files in the settings
STATIC_ROOT = 'path to your folder/static/'
STATIC_URL = '/static/'
then in your template:
{% load staticfiles %}
<head>
<script>
//only variables are declared
<script>
</head>
<body>
<script src="{% static 'show1.js' %}"></script>
<script> drawline(10,10,20,20,'black',4); </script>
</body>
in development mode, the runserver command will serve your static files. you may want to serve the files directly from the web server in production mode. also settings may vary depending on the django version, you can refer to the documentation of your version for further details.

Importing javascript files on WaveMaker

We have been using WaveMaker and wanted to know how we can go about importing an external javascript file using the platform ?
The external JS file should be imported into a folder in resources
The file path has to be given in login.html of the Web-App
The file path should be of the form "/projectname/foldername/filename.js/"
The functions in the external JS file can be accessed in the login page through its script and the function invoked here is from a sample js file.
The following works if using WaveMaker 6. This probably doesn't work with newer versions of WaveMaker.
Instead of having to add it to each project, try editing index.html in the webapproot directory and add you external js file:
<!-- Boot Wavemaker -->
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="/<path to javascript file>/sha512.js"></script>
Then, in order to have this work correctly in your development environment, add a context tag to server.xml just above the projects directory:
<Host appBase="webapps" autoDeploy="true" name="localhost" unpackWARs="true" xmlNamespaceAware="false" xmlValidation="false">
<Context docBase="c:/<Path To Javascript Filet" path="<path to javascript file matching whats in index.html>" reloadable="true"/>
</Host>
In the above Context tag, docBase is the local folder with js and path should match the path placed in index.html.
Doing this you can use the javascript file across all projects without having to add it to resources in the project.

require.js compiled versioning

I had moduar SPA with require.js. My version control was ...
require.config({
urlArgs: "bust="+((document.querySelector('#mainRest') && document.querySelector('#mainRest').getAttribute('data-version')) || 'noVer')});
where including require js ...
<script id='mainRest' data-main="js/rest/main" src="js/rest/require.js" data-version="30062015"></script>
In the way above I had a parameter for downloading dependencies.
Now i have lot of dependencies (templates, views) and i have to compile my require.js structure into single js (using r.js). Of course now I don't have any dependencies except the main one compiled file.
The question is: How can I add version parameter to the compiled file?
<script data-main="js/rest/compiled" src="js/rest/require.js?ver1" ></script>
I wonder but it is possible to set version directly through the "data-main" directive...
<script data-main="js/rest/compiled.js?ver=101" src="js/rest/require.js?ver1" ></script>

Categories

Resources