We have an ExtJS 4.2.1 app and use sencha cmd to build.
But during development I don't want to build every time I change something in the code.
But the index HTML file has bootstrap code in it and the locations of images, other js libraries, etc. is different pre and post build.
Also, even the "testing" concatenated code it too long to set break points in firebug.
So how can I run the code and set break points without building every time.
Typically we just run the code files themselves, but as I said, the location in the source tree, and the index.html file has bootstrap code, so that won't work.
What we do is include css and js libraries BOTH as single files and through the bootstrap. Since they have different paths they won't load twice. The extjs library is loaded through proper setup of the main application class and the loader.
When you're ready for production you can manually remove those since they'll fail every time. Our you can play with the directives. I believe anything included in <x-bootstrap> is ignored.
From the documentation:. The compiler ignores the files in the x-bootstrap block, and they are removed from the final page, as we will see later.
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 have done the following:
Installed both the AngularJS and NodeJS Plugins in Phpstorm
Downloaded the latest stable release of Angular (1.4.8)
Added angular.js to the project
Added angular.js to the list of libraries in Phpstorm
Directives in my HTML will autocomplete fine (e.g. ng-modal), but trying to do something like Module.fact does not autocomplete to factory. Here is my code:
var appModule = angular.module("appModule", ['ngRoute']);
appModule.fac //This is me typing factory, but auto complete doesn't help
I am running PhpStorm 10.0.2. I have tried using different versions of PhpStorm and I have also tried using Angular 1.5 (the beta version) with the same result. Also, I am new to angular, but my code is working. Thank you!
*I have already reviewed these links and SO posts:
https://www.jetbrains.com/webstorm/help/using-angularjs.html
https://www.jetbrains.com/webstorm/help/configuring-javascript-libraries.html
Why do AngularJS directives (attributes, etc.) show up as "invalid" in WebStorm 8?
Getting angularJS autcomplete in Webstorm/PHPStorm
The angular variable is a global one and when you have to many declarations of the same global variable PhpStorm/WebStorm can not handle auto-completion.
It's important to verify that only 1 declaration for angular is being discovered by PhpStorm. This doesn't have anything to do with your actually JavaScript project, but where PhpStorm looks for declarations.
If you hold down ctrl and mouse over the world angular. It should show it highlighted to be clickable, and a tooltip showing where it is declared.
If the tooltip says there are multiple definitions of the identifier, then it can not do autocomplete correctly. This is true for most JS variables in Php/WebStorm not just this angular variable.
You have a couple of ways to fix this:
1) Force type declaration with JsDoc to TypeScript
/**
* #var {angular.IAngularStatic} myAngular
*/
var myAngular = angular;
This will declare the variable myAngular using the TypeScript definition. There is less likely to be conflict with any already scanned JS source files that also declare angular. It's an easy fix, but adds unnecessary source code to your project.
2) Disable JavaScript source files by excluding them
If you are using node_modules or bower_components then you need to include some of the JS files from those folders, but not unnecessary duplicates. You won't need any Angular JS files since you've already installed the TypeScript definitions (which work better for auto-completion). In the Project Files panel in PhpStorm find the Angular packages, right click on those folders and "Exclude" those folders. You can also do this via project settings in "Files / Settings / Directories"
3) Ignore bundled output files for JavaScript
This is the most common issue I find with PhpStorm/WebStorm. PhpStorm will also scan minified JavaScript files you've packaged into your webroot/js folder. For example; If you use grunt to uglify your JavaScript code into app.min.js and inside that file is Angular and your project code. PhpStorm will scan this and create duplicate declarations of everything it finds.
Find all those duplicate *.js files in your project, right mouse click on the files and select "Mark as Plain Text" from the menu. This will tell the editor to completely ignore the file from all intellisense scanning.
So to summarize. If you control click on a declaration to go to source, and PhpStorm does not go immediately, but instead prompts you select from multiple declarations, then you have duplicates in your project and you need to narrow the scope. Once that is done everything else should work as expected.
f you prefer to use a CDN, place the cursor over the highlight library name, hit Alt+Enter, and Download Library. This will set up a local library in WebStorm’s cache (not in your project) so WebStorm can access AngularJS methods, directives, etc for autocompletion and documentation lookup.
https://github.com/eiriklv/react-masonry-mixin/blob/master/README.md
The above example shows the simple steps to get masonry-mixin working on node-js.
What solutions are available to enable my react component to use this plugin within a normal webpage? I would like a solution that has the least amount of 3rd party software to get working.
The require statement is not available without npm from what I understand.
Require statements can be used in client-side using a preprocessor called Browserify.
In order to use Browserify, you have to have one main .js file from which all your other files are loaded via require statements (however tangentially). You then run the Browserify command to parse and bundle it all into one file:
$ browserify main.js > bundle.js
I've personally used react-masonry-mixin, and this is the approach I use (although automated with Gulp).
I'm looking at this sample Angular App.
In the main html file called [index.html][2], there is this line:
<div ng-include="'header.tpl.html'"></div>
However, there is not file header.tpl.html in the same directory.
How then does Angular know where to find this file?
The linked sample app is built using Grunt, so the file/folder structure of the built application differs from the one you see in the repository.
For example, the templates you are asking about, are collected by html2js (Grunt task) and compiled into a single JavaScript file containing code that adds all templates to $templateCache (causing them all to be included on app initialization instead of being lazily loaded when required). When the ng-include starts looking for files, its first step is looking into the $templateCache. Only when it cannot find the template there, it tries to load it from the server (and save it to $templateCache for subsequent uses).
See Gruntfile.js in the repository for build process details.
I have set up my application based on this example
http://backbonetutorials.com/organizing-backbone-using-modules/
The thing that I now have more than 50 html files. It takes more than 5 seconds to load all files on first load. I know using node.js and require.js I can compress or minify the .js file and .css files but was wonder if there are any way we can compress all html templates into one file to speed up.
I'm about to face this very problem in my project and here's what I plan to do:
Write template loader function so that details of how templates are retrieved are encapsulated within. After that I only have to change one place in code when template handling logic changes.
At build time, compile my Handlebars.js templates into JS code. The process is described here.
Use R.js from require.js package to build single JS file from all compiled templates.
If you are using templates like described in that article (with require !text, _.template etc), then they will be compressed into JavaScript file as well. Give it a shot.
It doesn't make sense that 50 html files are loaded simultaneously into the browser, by right the require.js and node.js should be loaded once into the browser. Then ur index.html will select the html file amongst the 50 to append further as its content.