Ok, I already know that you should configure paths with RequireJS like this
require.config({
paths: {
name: 'value'
}
});
And call it like this.
require(['name'], function() {
/* loaded */
});
But the thing is, I'm working in environment in which I don't have access to the existing call to require.config(...). For those who care, the environment is Azure Mobile Services scheduled job. Microsoft has already included RequireJS in the environment and configured the paths. My question is two-fold.
1. How do I add paths to the existing require.config()?
I know calling require.config() again will destroy the existing configuration. Which is what I do not want to do.
2. How do I get to know which paths have already been configured?
I really wouldn't like to overwrite any existing path name or overwrite any existing library by accident.
Running require.config() again does not override your original config file. It actually extends it and adds your new paths to it. Right now I am using it this way, where configfile is also a require.config({})
<script data-main="configfile" src="require.js"></script>
<script>
require.config({
paths: {
prefix-name: 'path/to/file'
}
});
</script>
One way to avoid name collisions with Azure Mobile paths would be to simply prefix all your custom paths.
Disclaimer: I have never used Azure Mobile, just RequireJs. You may have to implement it a little differently but it is possible.
Related
I have a few components and I want to deploy them into S3 and make them reachable with CloudFront.
My problem is that I don't know what file(s) I need to upload to S3 and which file needs CloudFront needs to point to as entry point.
Here's my stencil.config.tsx:
import { Config } from '#stencil/core';
export const config: Config = {
namespace: 'stencil-test',
taskQueue: 'async',
outputTargets: [
{
type: 'dist',
esmLoaderPath: '../loader',
dir: './build/dist'
},
{
type: 'www',
serviceWorker: null // disable service workers
}
]
};
I tried executing npm run build that generated a couple of folders: build/loader and build/dist there's a lot of stuff within each folder but I have no idea how which folder and files are supposed to do what.
It was hoping the build command would generate a minified file that contained all the stuff needed (is this how it works?) so I could eventually do something like the following where I want to use my components:
<script type="module" src='https://cdn.jsdelivr.net/npm/my-name#0.0.1/dist/myname.js'></script>
Can anyone offer some guidance or point me towards any resources?
The www output target is meant for generating apps and not really relevant for component libraries. To host your components, you should upload the whole generated dist folder. Only the files that the client needs are downloaded, which depends on the client and which components they access (lazy-loading). So you don't need to worry about the amount of files. See https://stenciljs.com/docs/distribution.
To start, Stencil was designed to lazy-load itself only when the component was actually used on a page. There are many benefits to this approach, such as simply adding a script tag to any page and the entire library is available for use, yet only the components actually used are downloaded.
If you want to generate a single bundle containing all your components, there's an output target called dist-custom-elements-bundle. For the differences to dist you can have a look at the same docs link above.
One of the main differences is that loading the script doesn't automatically register the components for you, you'll have to either do it manually per component (using customElements.define(), or define them all using the defineCustomElements() export. The official documentation for that output target is https://stenciljs.com/docs/custom-elements.
I am working on node using hapi framework. New to this so I apologize if it comes out to be very basic.
I want to access a plugin name within the plugin files.
Use case is I want to access the plugin options from the server object.
So I can do server.registrations[plugin_name].options.
My workflow at that point (where I require the options) is not inside the register method ( I run an independent script that just needs to initialize the server, not start it; so no routes here) so not able to access the options from there, but I have the server object available.
Also, what is the correct way to expose the plugin options to other files within the plugin? If I need the options after a lot of nesting of files etc , it is very chaotic to keep passing the options object somehow from file to file, method to method.
Not really clear how to work this problem out.
Not a 100% sure what your question is but if you expose your options in a script (module) that can be required by both your plugin and any other files that you want to use the same options object that will allow you to access the same object in multiple places.
Please let me know if i understood correct, you can do like this.
const Plugins = require('./Plugins');
//Register All Plugins
server.register(Plugins, err => {
if (err){
server.error(`Error while loading plugins : ${err}`)
}else {
server.log('info', 'Plugins Loaded')
}
});
Let me clear the context first. I have bought an admin panel template from themeforest and stuck on implementing that with requirejs. The seller does not provide support for implementation.
The theme requires the following JS file, in order to run:
https://altair_html.tzdthemes.com/assets/js/common.js
I have created a fiddle, where I have included the file and defined that with requirejs. But a function (moment) is not being defined. I dont know where I am doing wrong.
Check the fiddle here:
requirejs.config({
paths: {
'common': 'https://altair_html.tzdthemes.com/assets/js/common'
}
});
require(['common'], function (common) {
console.log(moment);
});
http://jsfiddle.net/tareksiddiki/q5kumwvg/
But the moment function loads when we load the external javascript (https://altair_html.tzdthemes.com/assets/js/common.js) within the <script> tag in old school way.
I've noticed that every time I want to use a package in Node I need to "npm install" it locally and then use the require keyword. I wanted to know if there's a way I could include a remote library kind of like that way we can include remote files using client side html when we use a CDN:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
require() in node core is synchronous, so there is no way to do it natively (since network i/o is async in node). You'd have to write some function to fetch the resource first and then require() it.
You can't actually supply a URL to "require", but you can of course fetch a remote resource from a URL, including a javascript resource. And then load it locally.
The following answer even links to a "remote_require" that someone wrote to do another kludgy version of this.
how to require from URL in Node.js
If you are trying to use other JavaScript files in your application, you will need to export all of the functions defined by those JavaScript files.
You would export a function like so:
exports.nameOfExport = function(x, y, z) {
// Function content
};
You would then require this file in the file you are trying to use it in with this line:
var myFileName = require('./routes/folder1/myFileName'); // Relative path to required file
If this doesn't answer your question, I suggest going to https://www.npmjs.org/ to search for a package that does what you are trying to do.
I'm developing a web app using Require.js for AMD and amplify.request to abstract away my AJAX calls. The other advantage to amplify.request is that I've defined an alternative module containing mocked versions of my requests that I can use for testing purposes. Currently, I'm switching between the two versions of my request module by simply commenting/un-commenting the module reference in my main.js file.
What I'd love to do is use Grunt to create different builds of my app depending on which module I wanted included. I could also use it to do things like turn my debug mode on or off. I'm picturing something similar to usemin, only for references inside JavaScript, not HTML.
Anyone know of a plugin that does this, or have a suggestion about how I could do it with Grunt?
On our current project we have a few different environments. For each of them, we can specify different configuration settings for the requirejs build.
To distinguish between these different environments, I've used a parameter target.
You can simply pass this to grunt by appending it to your call like
grunt --target=debug
And you can access this parameter in the Gruntfile, by using grunt.option, like
var target = (grunt.option('target') || 'debug').toLowerCase();
The line above will default to debug. You could then make use of the paths configuration setting of requirejs to point the build to the correct module. Example code below.
requirejs: {
compile: {
options: {
paths: {
"your/path/to/amplify/request": target === "debug" ? "path/to/mock" : "path/to/real",
}
}
}
}