When using Meteor 1.3 with Mantra spec, what are the 'right' way and place to load external client script, I mean some JS library which has to be included client-side, with <script>...</script> tag?
you can use npm or atmosphere for adding package or library. but if you want to add manualy using this meteor package kadira:dochead
use meteor add kadira:dochead
I created a addScript.js file inside client/configs with the following code:
import {DocHead} from 'meteor/kadira:dochead';
export default function () {
let addScript = 'https://link-to-your-script';
DocHead.loadScript(addScript);
}
And imported it in client/configs/context.js
Related
I'm currently pulling hairs trying to figure out how to go about this.
So, I'm working in a vanilla JS environment with no webpack setup served with capacitor and want to use this capacitor-plugin: https://github.com/CodetrixStudio/CapacitorGoogleAuth
However, to use this plugin I have to import the package into my client code.
Here's what I've tried:
Unpkg type="module": however browser support in mobile isn't that great. And this app will be served to a ton of users
Using browserify + esmify to bundle the plugins code into something I could import with a <script> tag into my index.html. Didn't work
My last thought is to setup webpack to bundle everything for me, similar to the browserify approach and import that. However before I go through with all of that I wanted to reach out here to see if you guys had any other ideas.
Is there a way to access this plugin from window maybe?
so I figured out the way to go about this by following this article: https://medium.com/#SmileFX/a-complete-guide-building-a-capacitorjs-application-using-pure-javascript-and-webpack-37d00f11720d
Basically you have a www/js directory (vanilla js), and a src directory (ES6/import code goes). You then configure webpack to output in your www/js/ directory.
Note: Any variable you want accessible to your vanilla js code must be explicitly stored in the window object.
Example
./src/toBeWebpacked.js
import Module from "your-module"
window.doSomething = () => Module.doSomething()
./www/js/vanilla.js
const useModuleCode = () => {
// use code from webpacked ES6 JavaScript here
return window.doSomething();
}
I'm developing an Extjs project using 6.5.2 version and modern toolkit, i want to use https://momentjs.com/ package but i couldn't import the node_dependency.
The Momentjs page has the downloads or install methods, but if i download the code, where i want to use whatever method, this throw an exception and if i install the package using 'npm install moment --save' command, i don't know how to import and call it.
Someone can help me importing this dependency in extjs.
#Carlos You can do by adding script tag in the index.html file as suggested by Akrion.
Another way -
Inside app.json file you can add following inside js [] -
"js":[
{
"path": "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js",
"remote": true
}
]
Once this is added then you need to do sencha app refresh or sencha app build.
Then in the application code you can use it like following -
var welcomeText = 'Welcome to Sencha Fiddle! Today is: '+ moment(new Date()).format("MM-DD-YYYY");
Ext.Msg.alert('Welcome message',welcomeText);
Another approach would be to Ext.mixin.Mashup mixin.
This mixin allows users to easily require external scripts in their
classes. This load process delays application launch (Ext.onReady)
until all such scripts are loaded ensuring that your class will have
access to its required scripts from the start.
So you could have an Moment.js adapter class, like so:
Ext.define('MomentjsAdapter', {
mixins: ['Ext.mixin.Mashup'],
requiredScripts: [
'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'
],
...
});
I like this very much, because you keep the external dependency close to the place where it's used. Which is very handy when you might want to remove the dependency or reuse it in a different place/project.
I am trying to export some components of my Angular 6 application into a library. Unfortunately, I need to use a WebToolkit to connect to a proprietary service build by other people, which is only available as a pure javascript file. This file, in turn also needs jQuery and require.js.
Without libraries, I have solved this by adding these js files to the .angular-cli.json under "scripts"
{
...,
scripts: [
"node_modules/jquery/dist/jquery.js",
"node_modules/require/require.js",
"path/to/my/magic/library.js"
],
...
}
Now building my angular library, I would like to have those scripts built into my own library code, such that it can still be used by my customers in the simple manner of performing just one npm-install and importing it in their .module.ts file.
Is that somehow possible with the Angular-CLI 6? Or do you have other suggestions how I can achieve a simple installation of my library?
Provide the reference of your external JS in your angular. json file of main angular project in a script tag and provide the path of your package from your libraries node_modules folder like this. So now you have created the NPM package from your library and you are going to use it in different project
**Add externaljs file**
**Step 1**
Take a file in the assets folder and set any name. Like as custom.js
function getToday() {
alert(new Date().toLocaleDateString());
}
function greetings(name) {
alert(`wellcome ${name}`);
}
**Step 2**
Now add the customjs file reference in the angular.json scripts section array list. Like as below
"src/assets/custom.js"
**Step 3**
Now add the functions reference in a component file. I am using the app component.ts
//external js function declaration
declare function getToday(): any;
declare function greetings(name: any): any;
ngOnInit(): void {
// call the externaljs functions
getToday(); // without param
greetings('rohol'); // with param
}
Maybe isn't the cleanest way to do it but you can achieve this with:
let scriptTap = document.createElement('script');
scriptTag.src = '<route to your scripts>';
document.body.appendChild(scriptTag);
The best way to integrate is creating the library from ng new project-name -create-application=false
then you add the library with ng g library name-of-library
and you will have a clean project to develop your library
I'm building my first project using vue-cli and webpack and I'm not sure how to properly use an external JavaScript library to my project.
I want to add the Intro.js library which simply requires me to import the intro.js, add some tags to some HTML elements, and call the introJs().start() function.
I've installed the library with npm install introj.js --save
I've imported the library by adding import introJS from 'intro.js' into my <script> section of my App.vue file.
I've checked the compiled app.js file and I know introJS is being compiled so everything is good there.
My question is, where do I put introJs().start()? I tried putting it in the mounted() function of the App.vue file but that doesn't work.
Additional Info: When I try to run introJS().start() from the mounted () method in App.vue I receive this error: Error in mounted hook: "TypeError: __WEBPACK_IMPORTED_MODULE_7_intro_js___default(...) is not a function"
This should work:
const { introJS } = require('intro.js')
introJS().start()
In an html page you can include a javascript file by <script src="path"></script>
How do you get variables from an external path like this in react, if the path is, for example:
<script src="https://unpkg.com/flux-sdk-helpers#0.1/dist/flux-sdk-helpers.min.js"></script>
Thanks for all your help
Scripts loaded in that fashion normally install themselves as global variables and/or properties of some other global library.
According to the docs, flux-sdk-helpers installs itself as a global variable FluxHelpers when you install it this way.
This means your React code can access it as either FluxHelpers or window.FluxHelpers.
you can link it in your index.html file just be careful about what you call things when you are doing it as to not re use names in different places
if you are using react, then you probably should also learn about webpack.
if you will use webpack, then you can import { method} from "package" most scripts you got from NPM (node package manager) very easily.