extjs 6 build concatenating into 1 file

Question

I have generated my app in extjs 6 through sencha cmd. While doing sencha app build, all my js files get concatenated into 1 file(app.js). I want to keep my js folder structure like before to help me in debugging and putting breakpoints. Is there a way we can do that?

Answer 1

Important Sencha commands for development and deployment

sencha  app build development

It will generate development build.

sencha  app build production

It will generate production build(single file app.js).

 sencha  app build testing

It will generate testing build.

sencha  app watch 

It will do a refresh and update your extjs file.

 sencha  app build clean

It will do a clean build.

Answer 2

You should do your debugging before you do build. Doing a build is really just that, "compiling" all the js into a single file.

In some cases you need to debug the build code itself, in those cases you can turn of YUI compression, so that you can use break points etc. Then just use the "testing" parameter:

sencha app build testing

Then, locate your build in build/testing in stead of build/production. There is also a sencha app build development but it's really just for helpful for building/updating the css bootstrap, and your're better of using sencha app watch for that (since it's constantly monitors and updates if needed)

Answer 3

You can and should debug your ExtJS application without compiling it over and over and over again.

For me, this works as follows:

• I have a server API located at localhost/api/
• I have the uncompiled ExtJS app located at localhost/app-dev/, complete with the ext subdirectory.
• I have the compiled ExtJS app located at localhost/app/

On deployment, I would deploy onto a real server

• the api into server/subdir/api/
• the app into server/subdir/app/

But debugging is locally. My development computer has that additional app-dev directory that fetches from the same api using the same relative paths, and the uncompiled version always is a fully working version that can be fired up in the browser of your choice.

So if I only change the javascript and want to test, I don't have to wait for a compile - I can reload localhost/app-dev/index.html and there I am. When I believe that there are no bugs in the app-dev version, I then just doubleclick a batch file that produces the compiled version in the app directory.

If I want to test CSS changes, I have to compile first, because Sencha Cmd uses SCSS files. This is why the uncompiled version wants to fetch its CSS files from the build directory as well - a browser cannot use the uncompiled CSS. But after compile, the new CSS is also available to the uncompiled version of the app.