I have an application using Backbone.js and requirejs. I'm seeing some incredibly weird behavior where a library, after being properly loaded from the path provided in the requirejs config, fails on load to a totally random path as a dependency of a file that doesn't even list it as a requirement (using CommonJS syntax), or as far as I can tell have that dependency in any of it's dependencies.
In order to debug this problem, I'd like to print at runtime, or step through using the debugger at runtime, what's causing what to load in requirejs. How can I do this?
Related
We have an ExtJS modern app. We would like to use cmd to minimize/compress our code into a single .js file - effectively doing what a non Ext app would do with other minifiers like uglifyjs or terser.
I believed we could achieve this with the compile command such as:
sencha -sdk ext-7.1.0.46 compile -cl=myclassfolder -inp=ES6 concat outfile.js
However, it complains that it can't find the Ext classes with an error like:
[ERR] Failed to resolve dependency Ext.data.Model for file myapp.model.mymodel
[ERR] Unknown definition for dependency : Ext.data.Model
It seems to be the basic task of extending Ext.data.Model it doesn't like and very much feels like I simply need to reference the extJS class structure correctly for this to work, but can't figure out the command line to make it happen (I somewhat assumed that the sdk reference would fix this).
Is this possible?
Ok, to help anyone who is facing the same problem and wants to compress/minify their ExtJS but without creating a full sencha app.
The command is fairly simple and the answer is to include the path to your dependent js files in the -cl (or -classpath) argument, then exlude the Ext namespace:
sencha -sdk stack/Sencha/ext-7.2.0 compile -cl=ext-modern-all.js,packages/ux/modern/ux.js,myclassfolder -inp=ES6 exclude -namespace Ext and concat outfile.js
You can then use terser or your preferred minify tools to minify/mangle the output (or add the compress command to the above to allow cmd to minify also). It's a reasonable way to build your ExtJS code into several manageable extjs "modules" which can be loaded when needed (or when security allows) rather than the "big bang" approach of cmd.
This will produce a single js file, correctly ordered, the only issue is that it includes the Ext microloader code, which it adds by default. I have not managed to have the compiler not inlcude the microloader, however you can effectively disable it by defining the microloader yourself between the load of your ext-all.js file and your newly created file by using something like this is another file or inline script tag:
Ext.Microloader = {
run: function(){}
};
I know there aren't many folks left using ExtJS, hope this helps someone at some point, at worst case it allows a bit more control of the ExtJS build process.
I built a small React application that ultimately will be in a section on a page with other small apps. The way the system is architected requires that each app be a require module that exports an init function that when called will render the app into a div by id. I have already tweaked my React build so that I have a single js file. Now I'm trying to figure out if I can make this final build be somehow loadable with requirejs. I have found a lot of information about using requirejs as part of the build but I would rather be able to stay with the create-react-app way and maybe somehow add in the ability to do the output in an AMD way. I know this must seem silly but I can't otherwise get around the AMD architecture of this platform.
You can achieve this by tweaking the configuration of webpack.config.js file, you need to check out webpack's output.library options (library, libraryExport, and libraryTarget):
https://webpack.js.org/configuration/output#module-definition-systems
module.exports = {
//...
output: {
library: 'MyReactAppLibrary',
libraryTarget: 'amd'
}
}
For an angular application, I am building a Dll of my vendor libraries. I am having a problem where the core library (snapjs) has not been loaded by the time the angular-wrapper (angular-snap) is loaded.
What I see in the vendor.bundle.js is happening is that the angular-snap library is being loaded first, therefore window.Snap is not defined (since Snap is located further down the vendor.bundle.js file).
If I manually move the Snap library above the angular-snap library, everything works.
Is there a way to specify require order in order for this to not happen?
I started using Typescript with Webstorm today and I am getting real crazy understanding what's going on. Imagine a project using tsd loading definition types on typings/. For background, angular defines an angular module aliased to ng and then there is other d.ts files appending more modules into angular (and technically ng).
When I require for example the router I get:
In fact, if you go to angular-route.d.ts (from DefinitelyTyped) you can see the same:
The d.ts files are technically correct because tsc compiles them giving it those definition files.
On the other hand, Webstorm allows you to load libraries (typescript stubs from DefinitelyTyped). If I go there and I download the angular ones (which are 100% the same as the one I have on typings/) I get:
Same error but at least I don't get the red wiggle in the solution explorer. Still, it doesn't give me any intellisense when writing ng.route.<ctrl+space>, it just turn blue when I finish writing it (in fact, I can cmd+click and go to the definition).
Who's failing here? The typescript plugin? It is weird that it fails using typings/ and somehow work with Webstorm's libraries menu (using the same file).
Who's failing here? The typescript plugin?
Yes. You need to use the Webstorm beta channel to get support for TypeScript 1.4 union Types at the moment.
I cant seem to get this to work. I am using BBB-Handlebars. When I use this during development, the application renders perfectly and I have no issues. As soon as I run the command BBB release and point my application to the built and compiled require.js file, my templates don't render. For example, my templates will render with {{model.someAttribute}} instead of {{The models attribute}}. So its keeping the brackets intact and for some reason Handlebars is treating the entire template as Html. Its not rendering out the data. I have tried different combinations by editing the grunt.js file, but still no luck. Any ideas?
Anyone else having this issue, I changed the following:
grunt.registerTask("debug", "clean lint jst requirejs concat stylus:compile");
To:
grunt.registerTask("debug", "clean lint jst handlebars requirejs concat");
I don't need stylus, so I removed it. Just added Handlebars task and seemed to sort out the issue. Let me know if you are still having problems.