Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 21

Thread: How to generate JS source map?

    Success! Looks like we've fixed this one. According to our records the fix was applied for SDKTOOLS-564 in 6.0.0.92.
  1. #11
    Sencha - Engineering israelroldan's Avatar
    Join Date
    Nov 2011
    Location
    The Netherlands
    Posts
    395
    Vote Rating
    51
      1  

    Default How to generate a source map (workaround)

    We're looking into adding this as an option of the build process, but so far there's nothing there yet.

    In the meantime, you can generate your own source maps for your Ext JS / Sencha Touch apps using the closure compiler like this:
    1. Download the official compiler.jar (Do note that we use a distributable version [closure-compiler-xxxx.jar] so the error that is described here is not actually related to the source map generation but to the jar being used)
    2. Build your app for testing (for the time being, this would be the best way to manually generate the source map).
    3. On your build/testing/{appName} directory, run the following command:
      Code:
      $ java -jar ~/Downloads/compiler-latest/compiler.jar \
             --js app.js \
             --create_source_map app.js.map \
             --source_map_format=V3 \
             --js_output_file app.min.js && \
              echo //# sourceMappingURL=app.js.map >> app.min.js
    4. Modify build/testing/{appName}/app.json, replace app.js with app.min.js
    If you now open your app using Chrome or Firefox and since the source map is now available, you'll be able to see the source of your minified application for debugging purposes.
    Israel Roldán | Senior Software Engineer (Framework tools)

  2. #12
    Sencha Premium Member
    Join Date
    Jan 2011
    Posts
    8
    Vote Rating
    1
      0  

    Default

    Any news on source map generation concerning SDKTOOLS-564 or EXTJSIV-6132 ?

  3. #13
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    367
    Vote Rating
    95
      1  

    Default

    Here's my recipe for source maps baked into the CMD workflow:

    Add to app/.sencha/app/production.properties:
    Code:
    build.compression=
    enable.resource.compression=0
    (Disables CMD compressing app.js)

    Add to app/build.xml:
    Code:
        <target name="-after-build">
            <if>
                <isset property="build.compression.closure.jar"/>
                <then>
                    <echo>Compressing with closure ${build.dir}/app.js</echo>
                    <move file="${build.dir}/app.js" tofile="${build.dir}/app.debug.js"></move>
                    <java jar="${build.compression.closure.jar}" fork="true" failonerror="true">
                        <sysproperty key="DEBUG" value="true"/>
                        <arg value="--warning_level=QUIET"/>
                        <arg value="--js=${build.dir}/app.debug.js"/>
                        <arg value="--create_source_map=${build.dir}/app.js.map"/>
                        <arg value="--source_map_format=V3"/>
                        <arg value="--source_map_location_mapping=${build.dir}|."/>
                        <arg value="--js_output_file=${build.dir}/app.js"/>
                    </java>
                    <echo file="${build.dir}/app.js" append="true">//# sourceMappingURL=app.js.map</echo>
                </then>
            </if>
        </target>
    (Moves CMD-produced app.js to app.debug.js and produces minified app.js and app.js.map)

    Pass in path to closure jar when calling cmd (or set it in one of your .properties/.cfg files):
    Code:
    sencha -i ant -Dbuild.compression.closure.jar=/home/chris/bin/closure/compiler.jar production build
    UPDATE: see new version of build.xml addition below that eliminates production.properties changes
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly

    Jarvus builds and optimizes top-quality Sencha Touch and ExtJS apps for open-source projects and clients of all sizes.

    Don't waste time with bugs that have already been found and fixed by the community, compile our tried and tested hotfixes packages into all your projects: https://github.com/JarvusInnovations/sencha-hotfixes

  4. #14
    Sencha User
    Join Date
    Jul 2012
    Posts
    29
    Vote Rating
    1
      0  

    Default

    Is the jar included with CMD?

    Quote Originally Posted by themightychris View Post
    Here's my recipe for source maps baked into the CMD workflow:

    Add to app/.sencha/app/production.properties:
    Code:
    build.compression=
    enable.resource.compression=0
    (Disables CMD compressing app.js)

    Add to app/build.xml:
    Code:
        <target name="-after-build">
            <if>
                <isset property="build.compression.closure.jar"/>
                <then>
                    <echo>Compressing with closure ${build.dir}/app.js</echo>
                    <move file="${build.dir}/app.js" tofile="${build.dir}/app.debug.js"></move>
                    <java jar="${build.compression.closure.jar}" fork="true" failonerror="true">
                        <sysproperty key="DEBUG" value="true"/>
                        <arg value="--warning_level=QUIET"/>
                        <arg value="--js=${build.dir}/app.debug.js"/>
                        <arg value="--create_source_map=${build.dir}/app.js.map"/>
                        <arg value="--source_map_format=V3"/>
                        <arg value="--source_map_location_mapping=${build.dir}|."/>
                        <arg value="--js_output_file=${build.dir}/app.js"/>
                    </java>
                    <echo file="${build.dir}/app.js" append="true">//# sourceMappingURL=app.js.map</echo>
                </then>
            </if>
        </target>
    (Moves CMD-produced app.js to app.debug.js and produces minified app.js and app.js.map)

    Pass in path to closure jar when calling cmd (or set it in one of your .properties/.cfg files):
    Code:
    sencha -i ant -Dbuild.compression.closure.jar=/home/chris/bin/closure/compiler.jar production build

  5. #15
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    367
    Vote Rating
    95
      0  

    Default

    The jar is included but it is an ancient version from 2012 that might not even support sourcemaps. It's better to download the latest jar and pass in the path to it
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly

    Jarvus builds and optimizes top-quality Sencha Touch and ExtJS apps for open-source projects and clients of all sizes.

    Don't waste time with bugs that have already been found and fixed by the community, compile our tried and tested hotfixes packages into all your projects: https://github.com/JarvusInnovations/sencha-hotfixes

  6. #16
    Sencha User
    Join Date
    Jul 2012
    Posts
    29
    Vote Rating
    1
      0  

    Default

    This is great, I never thought to use closure. Thanks!

  7. #17
    Sencha User
    Join Date
    Jul 2012
    Posts
    29
    Vote Rating
    1
      0  

    Default

    Sorry themightychris ,

    I have one more question. It looks like you're using --source_map_location_mapping to make sure closure compiler is using relative paths instead of the absolute paths that the compiler creates, except that the version of compiler I'm using doesn't have that flag available and I can't seem to find anything like it in the closure docs. If I run the operation manually, I can get it to work, but I can't seem to configure hte build.xml file to do it. Are you using a special version of compiler? I'm using the most recent version of compiler

  8. #18
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    367
    Vote Rating
    95
      0  

    Default

    I'm using the latest version from https://dl.google.com/closure-compil...ler-latest.zip

    That source_map_location_mapping option is documented if you run the compiler with --help

    I also found it discussed here: http://stackoverflow.com/questions/2...remote-machine

    source_map_location_mapping has nothing to do with the compilation or map building processes, but rather controls how local paths get translated into the http paths when embedded in the source map for the browsers to follow and download the uncompressed sources. You could use it to generate paths to a CDN, or in this case just make them relative
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly

    Jarvus builds and optimizes top-quality Sencha Touch and ExtJS apps for open-source projects and clients of all sizes.

    Don't waste time with bugs that have already been found and fixed by the community, compile our tried and tested hotfixes packages into all your projects: https://github.com/JarvusInnovations/sencha-hotfixes

  9. #19
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    367
    Vote Rating
    95
      1  

    Default

    I've removed the customizations to production.properties in favor of making those changes conditionally in build.xml's -before-init target so that the normal compression settings can remain in effect if a build is done without passing in a closure jar

    Code:
        <target name="-before-init">
            <if>
                <isset property="build.compression.closure.jar"/>
                <then>
                    <property name="build.compression" value=""/>
                    <property name="enable.resource.compression" value=""/>
                </then>
            </if>
        </target>
    
        <target name="-after-build">
            <if>
                <isset property="build.compression.closure.jar"/>
                <then>
                    <move file="${build.dir}/app.js" tofile="${build.dir}/app.debug.js"></move>
    
                    <echo>Compressing with closure ${build.dir}/app.js</echo>
                    <java jar="${build.compression.closure.jar}" fork="true" failonerror="true">
                        <sysproperty key="DEBUG" value="true"/>
                        <arg value="--warning_level=QUIET"/>
                        <arg value="--js=${build.dir}/app.debug.js"/>
                        <arg value="--create_source_map=${build.dir}/app.js.map"/>
                        <arg value="--source_map_format=V3"/>
                        <arg value="--source_map_location_mapping=${build.dir}|."/>
                        <arg value="--js_output_file=${build.dir}/app.js"/>
                    </java>
                    <echo file="${build.dir}/app.js" append="true">//# sourceMappingURL=app.js.map</echo>
                </then>
            </if>
        </target>
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly

    Jarvus builds and optimizes top-quality Sencha Touch and ExtJS apps for open-source projects and clients of all sizes.

    Don't waste time with bugs that have already been found and fixed by the community, compile our tried and tested hotfixes packages into all your projects: https://github.com/JarvusInnovations/sencha-hotfixes

  10. #20
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Cluj, Romania
    Posts
    789
    Vote Rating
    58
      0  

    Default

    I see the FIXED status on this one, wondering if there's a easier (automated) way of generating the source maps. I found nothing in the Sencha CMD docs about this.

    (Except this thread https://www.sencha.com/forum/showthread.php?312020)
    Github https://github.com/vadimpopa
    Blogging @ : http://vadimpopa.com
    Twitter: @vadimvpopa

Page 2 of 3 FirstFirst 123 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •