Why do we want to have another require structure inside a require structure?
like
require([mod1,mod2], function(m1, m2){
require([mod3], function(m3){
// and then will use m1 and m2 here as well
})
})
Why can't we just have one require structure? I want to understand the motivation between this setup.
Nested require isn't mandatory, and can easily be avoided if this don't fit your style.
Although, this can be useful to load submodules or conditional modules (like a polyfill).
In a more personal experience, I often use nested require inside my router controller in order to load certain page view when they're requested. This allow me to request only the dependencies of my router without loading the entire page collection of an app.
I also often find myself using nested require to manage some i18n aspect of some apps by loading conditional locale.
Last thing, I'd just remember that modules should be defined using define, not require. require function is really used to arbitrary load scripts if needed (and can be use once to bootstrap your app). So in most of the real use case, you'll have some nested require inside a define module definition.
Hope this help!
Related
Anyone that can point to any documentation on howto reuse code in lit-element.
The problem now is that if I declare an element, in my case a close-button and I want to reuse it by importing it into 2 or more lit-elements, there will be an error in the browser about the close-button being declared more than once.
Understandable enough, but how do I reuse a component, I could of course move the button to a separate file and add it to the document, but then there would be dependencies on that for other components to work.
Any suggestions
If close-button self-registers itself, with a call to customElements.define('close-button', ...), then you should be able to import its defining module and not have any errors due to the module caching behavior of JS.
You must have multiple customElements.define('close-button', ...) calls, so I'd make sure that 1) it's self-registering and you're not registering it again in each component that uses it, and 2) you're using standard JS modules.
After investigating a bit more, I concluded that sharing HTML templates might be the way to do it.
I'm new to webpack, and am trying to get my head around how I can switch an existing project to using it (am now using React in parts of it, so it has become necessary).
The kinds of things I am uncertain about:
As the package.json contains all my server side stuff too, will it not try to compile all this into the bundle.js?
My project contains a huge number of statically served files, and also a load of EJS generated pages. What's the best method for converting everything to webpack, I'm thinking it's going to be a bit of a headache to switch everything to 'require' statements instead of tags, but I guess it's the only way of taking full advantage of the benefits of webpack? Are there any recommended methods (or even scripts that will handles these changes for me?!).
Webpack will take care of "tree shaking" for you -- that is, it will only include the modules that your entry points explicitly use, no matter what is in your package.json file.
Looks like there is some support for EJS already in Webpack. A good conversation of it is here: https://www.npmjs.com/package/ejs-simple-loader#purpose You can then transition gradually (or not at all) as need be.
1.The backend dependencies in your package.json is unrelated to your frontend stuff. You just need to indicate the correct entry points.
FYI Entry Points
2.My suggestion is that you can find one EJS loader in GitHub to solve it.
FYI Loader
I’m building an electron app. In it, I have a webview with a preload script. Inside said script, I’d like to use sweetalert.
I installed sweetalert with npm install --save sweetalert. Inside my script I load it with require('sweetalert') and call it with swal("Hello world!");. I now notice it doesn’t look right, as the alert is missing its required CSS file. But I’m loading it with require('sweetalert'), which is great since sweetalert can just remain in its directory inside node_modules and I don’t have to care for it, but its CSS is an integral part of it, and is not getting pulled the same way.
Now, what is the recommended way of solving this? Keep in mind I’m inside a javascript file and would like to remain that way. Do I really have to go get the CSS file and inject it in some way? And how would I do it correctly, since it is inside node_modules? After testing it, it seems like it can’t be done in this particular case due to Content Security Policy.
Either way, that seems so clunky in comparison to the require statement, it’d seem weird for a simpler solution to not be available.
You'll have to include it like you would normally do in a browser, for example in index.html. Copy it out of the module folder into your css folder if you have one and link it with the link tag. It depends on if you're using plain electron or some other boilerplate template with there is a gulp/grunt workflow on where to stick it but that's it really, electron is just a browser that's running your JS/html so it's really the exact same process. require only loads the JS module but not the styles.
if you wanted to include it dynamically you could use the same techniques as a regular browser for example (ex. document.write/create element).
I'm not familiar with sweetalert, but hopefully this helps.
Your syntax for require should be something similar to this.
var sweetalert = require('sweetalert')
You should then be able to access methods on the sweetalert object using the following syntax.
sweetalert.someMethod()
Remember requiring just returns a javascript object. Those objects usually have methods that will allow certain functionality. If you want to add sweetalert to your page, you will either need to inject it within the html, or the javascript within the sweetalert module will need to dynamically create html where the css is included. I hope that clarifies some things and helps you get a better sense of some of the inner workings.
In Express.js, is there a standard way to re-order the middleware registered on an express#Router object? I have a situation where it is possible to dynamically register static asset directories that should be served by the app via express.static(). However, the Router#use() method (which I'm using to register the new asset directories) always puts middleware at the end of Router#stack. I want this to be at the beginning. Is there any way to achieve this?
I have a working implementation that basically traverses the current Router's stack in reverse, picks the first middleware called staticMiddleware, and moves it from that location to the front of the array. This works, but is obviously dependent on the internals of Route. I'm hoping there's another, more standard way to achieve the same behavior.
You probably want to just have a custom route at the beginning of the order that can examine the path, compare it to a list of directories you want to serve (that can change over time) and then serve the static content if its path matches.
This would just be a smarter version of express.static() that works off a dynamic path list rather than only a pre-defined path. There isn't much to express.static() so you can just copy it into your function and make it smarter.
It is apparently possible to crack into the stack of middleware and modify the order. I don't know if this is a supported capability or just something unsupported that people have figured out (that could break in the future). Here's one article that discusses this: https://www.exratione.com/2013/03/nodejs-abusing-express-3-to-enable-late-addition-of-middleware/
What I want to do is really similar to this and this except I'm trying to figure out how to put an ArrayExtension inside a module.
I'm trying to get something similar to the way C# extension methods work, that way I can just import the module and I'll have my extra methods. The links I provided show how to extend an existing object, but I haven't been able to figure out how to encapsulate that into a module.
If you're targeting non-browser environments like node.js this will be possible because you will be able to pass references to your module's global members, such as Array, to other modules. Those other modules can then extend the passed in object and/or its prototype with extra functionality which will be only accessible by the calling module. Other modules would have to do the same in order to get these extensions; therefore, conflicts are minimized since imports are explicit.
However, in browser environments this is not the case since there is only one window object and any changes to its members are available everywhere. As soon as any of your modules extended Array those extensions would be available to all other modules -- increasing the possibility for conflicts and making the code harder to reason about.
With that said, there are patterns in JS, and therefore TypeScript, which should accomplish what you want. One such pattern is the 'mixin' pattern which allows you to add on extra functionality on an object instance basis. You could separate re-usable code into mixin modules which could then be applied to an object when needed, or even automatically in constructors. Take a look at this for a decent overview and implementation examples: http://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/
If you're trying to extend the built in Array type you can't do that within a module. You're extension will need to live in an ArrayEx.ts file and occur outside of any modules. The reason for that is that if you did it within a module you'd be extending the Foo.Array type which isn't the same as Array.
But you said you just want to be able import the module to have your extra methods show up and all you really need to do is add a /// <reference path='ArrayEx.ts' /> to any file you want the extension methods to be available to. This is essentially the same thing.