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.
Related
Maybe someone can help me with my requirement.
I am in trouble about the compilation of a new custom version of extjs with the use of sencha CMD.
For this purpose, I have used diffetent instructions but with the same result. No one instructions seems to work properly or perhaps there is something wrog in these instruction.
Below, the latest instruction that I have used for produce a custom version for extjs.
sencha -debug=false compile -classpath="ext-6.0.1\classic\classic\src,ext-6.0.1\packages\core\src,ext-6.0.1\classic\classic\overrides" exclude -namespace Ext.chart and concat -yui -out "test.js"
After the execution of this instruction, in test.js I have a custom version of Extjs. Or so it seems.
If I include this js into a webpage, with Firefox and firebug I can see this error of javascript: "Ext is undefined".
From this, I have some questions:
First of all, is this the correct way to compile a new custom version?
The classpath parameter is correct? There are other paths to include?
In the instruction above, I have included the "exclude" parameter (for the namespace Ext.chart) but if I search in the output file I can found the related functions. It is the correct way to exclude something? Ext.chart is the namespace or is the class name?
Thanks in advance for any reply.
Lorenzo.
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).
We have an extjs application where the structure we laid out doesn't exactly match the structure Sencha recommends. In our structure we don't have an app.js but we do have a js where we mention the autoload and launch function, example as below along with the folder structure.
What we are looking is to minify all the JS files in admin folder and create one JS to be used in production, we tried looking at the Sencha CMD but of no luck. Can some one please point us for the exact steps for minifying our application for production use.
Ext.Loader.setConfig({
enabled: true,
paths: {
'Admin': '../../script/js/ace/admin',
'Ext.ux': '../../script/js/ext4/ux'
}
});
Ext.require('Admin.view.Administration');
Ext.application({
name: 'Admin',
appFolder: '../../script/js/ace/admin',
launch: function()
{
Ext.QuickTips.init();
var me = this;
Ext.create('Admin.view.Administration', {
renderTo: 'contentPanel'
});
}
});
We tried Cmd by generating JSB3 file, I know its deprecated in 4.2.1 but with the structure we have we felt that was the only option.
we tried the below command, but no jsb3 file got generated
sencha build admin.jsb3 <path to the admin js folder>
Thanks in advance, any pointers are really appreciated.
I posted this in Sencha forum, but I am expecting a much simpler option then they have provided.
Edit
we have multiple apps, and in most cases we try to use the js from other app folders.
For example in the below image we have utilities and admin apps, from utilities app we use SourceStore and the autoloader is defined as below to access the required
Ext.Loader.setConfig({
enabled: true,
paths: {
'Admin': '../../script/js/ace/admin',
'Utilities': '../../script/js/ace/utilities',
'Ext.ux': '../../script/js/ext4/ux'
}
});
If you let Sencha CMD to generate a skeleton application for you and then merge your existing code with it, then it will be really easy.
Otherwise you can try the old JSBuilder from Sencha as well.
I'd highly recommend checking out grunt with the grunt_sencha_dependencies plugin. Here's a tutorial.
At a high level, what you do is:
1) Run the sencha_dependencies plugin to generate a list of dependencies.
2) Pass the outputs to the uglify plugin to concat and minify the javascript.
3) Use grunt's copy task to replace to update your index.html with the minified output.
edit: I've dealt with Sencha CMD and it is awful. I would not wish it on my worst enemy. Grunt is just way easier.
I recommend you using JAWR. Basically you define in the jawr.properties file your bundles, and say which file or folder belongs to which bundle. A bundle is actually a bunch of JS files that are minified into another single one and can be requested separately in your servlets/JSP files. Besides, you can define dependencies between bundles (which by default are independent), so that when you include a bundle, other bundles are automatically included in your page. To include a bundle you use the special tag <jwr> in your servlet. Besides, you can enable the debug mode, so that when you develop, you can debug your code.
How it works: you add a servlet to your web.xml file to be loaded on start-up, which is also the stage when these bundles are generated (transparent to you).
Some tips:
Check this tutorial
Because in ExtJS the order in which the files are used is important, you should consider it when you define your bundles.
If you are willing to give Sencha CMD another shot, you could try using the sencha compile command.
sencha compile --classpath=folders-your-using,separated-by-commas concatenate --yui --output-file=output.js
--classpath is the folders you want to include.
--yui is the compressor
--output-file is the name of the javascript output.
I would recommend reading the sencha cmd guides. They can be a little intense, but sencha command packs so many tools in it that it probably deserves to be: http://docs.sencha.com/cmd/5.x/advanced_cmd/cmd_reference.html
Using Cmd 3.0.0.141, I have successfully generated a workspace and an Ext app in that workspace. The application builds correctly until I attempt to integrate the Bryntum Scheduler, where I encounter an error when I try to build:
"Failed to resolve dependency Sch.panel.SchedulerTree for file ExtCalendar.view.Tree"
the app is very simple at this point, uses Ext.application and follows the MVC pattern where I have a view defined "ExtCalendar.view.Tree" that extends 'Sch.panel.SchedulerTree". I also have models and stores that extend Bryntum classes as well, so I assume the compiler will trip over those as well, since it can't see the Sch namespace.
I've added a 'js' path to my app.json that points to the bryntum js file where 'Sch.panel.SchedulerTree' comes from. I've tried to run the 'refresh' command with the same results (Failed to resolve...). I've regenerated the bootstrap.js file manually using 'compile', but nothing from the Sch namespace ever gets added to it, despite the Brytum lib file being in the classpath.
What do I need to do in order to successfully run the 'build' command with libs like this?
Or, do I need to take a more granular approach using the 'compile' command?
With the help of the nice folks on the Sencha forums, I was able to resolve my build issues. The solution, for me, involved a shim. I added an external shim.js file to my index with as many //#require and //#define directives as needed in order to resolve the dependency issues.
According to the nice folks at Bryntum, once I upgrade from the free-trial version of the Bryntum Scheduler, I will be able to get rid of the shim and simply rely on the sencha.cfg classpath pointing at the Bryntum src.
Also, as an aside, the app.json file is not used in ExtJS apps, its inclusion in the generated files was a bug in build 141 of Cmd v3.
See this thread for more detail.
A typical extjs example application includes the extjs library by referencing files such as:
ext-all.css
ext-all.js
What's the 'rails 3.1 way' of including these files, noting that they reference hundreds? of files in subdirectories
(e.g. ext-4.0.2/resources/themes/stylesheets/ext4/default/_all.scss)
and there are relative paths:
(e.g. background-image:url('../../resources/themes/images/default/shared/shadow.png'))
I'm tried numerous combinations of require_tree et al., but can't seem to get it to work.
I'm wondering if I need to mess w/ 'provide', but I can't seem to find the documentation I need.
What you want is for this file to compile via the Rails asset pipeline:
resources/themes/templates/resources/sass/my-ext-theme.scss
To get this to work, I learned a few things the hard way:
ExtJS uses SASS to compile (so does Rails) and Compass, which includes blueprint and compass CSS kits. Compass doesn't work with rails, you need to use the gem "compass-rails", which doesn't include the CSS toolkits. Only the main compass gem has these toolkits, and it's a dependency for compass-rails so you should get them if you bundle compass-rails, they need to be in your sass.load_paths config. If you include the "compass" gem without compass-rails you will have strange errors and become an expert at the rails asset pipeline as you try to solve them!
ExtJS uses an older version of SASS, the newer one Rails uses doesn't like having functions and mixins defined inside of modules. To fix this, look at the errors it's giving you (always a function or mixin definition) and move them to _functions or _mixins files.
(more info: getting error after ugrading to sass-3.1.8)
Here's how to get up and running:
Put this into your config/application.rb:
# Set up our ExtJS SASS build environment
config.sass.load_paths << "#{Rails.root}/vendor/assets/stylesheets"
config.sass.load_paths << "#{Rails.root}/vendor/assets/frameworks/compass/stylesheets"
config.sass.load_paths << "#{Rails.root}/vendor/assets/frameworks/blueprint/stylesheets"
Put the ExtJS stylesheets (the ext4/default directory in the SDK) here:
vendor/assets/stylesheets/ext4/default/
Put my-ext-theme.scss into app/assets/stylesheets and use it like you normally would with rails. It will call this code:
#import 'ext4/default/all';
That will bring in all of the ExtJS definitions, and you should be on your way.
Jeff! Take a look at my answer here, I think your problem is the same.