{"id":342,"date":"2016-07-25T06:58:56","date_gmt":"2016-07-25T06:58:56","guid":{"rendered":"http:\/\/fluentreports.com\/blog\/?p=342"},"modified":"2016-08-08T18:46:24","modified_gmt":"2016-08-08T18:46:24","slug":"nativescript-webpacking","status":"publish","type":"post","link":"http:\/\/fluentreports.com\/blog\/?p=342","title":{"rendered":"NativeScript: WebPacking"},"content":{"rendered":"

The NativeScript team released a cool plugin using the \"WebPack\" code to packup the entire code base and since it does things like tree shaking; your end result is a much smaller app.<\/p>\n

Well I had an opportunity to test it over the last couple weeks for a friend of mine (Nathan Walker) as he is prepping to release a very very cool app.<\/p>\n

However, the NS-Webpack plugin is unfortunately very (very) buggy; and odds are very (very) likely if you are doing anything beyond a very simple application; it will not work.\u00a0\u00a0 You can see a stack of bug reports in the repo <\/a>for all of these issues I mentioned and some others; so hopefully these issues will soon be just a distant memory, and it will work as intended.<\/p>\n

So many days later; and after much debugging, we can declare that we have smacked and cajoled webpack into shape and we were able to get it to actually webpack an application properly!<\/p>\n

So here is the things you need to do if you want to webpack something while it is in its current state...<\/p>\n

Fonts<\/h2>\n

The first thing you need to be aware of; is that on iOS if you are using any custom fonts; the automatic font registration is totally broken when webpack'ed.\u00a0 The solution is to fallback to what we used to have to do on iOS; which is manually register the font.\u00a0\u00a0 The code I wrote for this project looks like this:
\n

if (global.NSObject &amp;&amp; global.NSString) {\n\u00a0 var font = require('ui\/styling\/font');\n\u00a0 font.ios.registerFont('fontawesome-webfont.ttf');\n}<\/pre>
\nBasically the if statement tests for iOS, then I manually require the font class; and finally the last line; I registered the font I needed.\u00a0 You can repeat the last line for each font you are using.<\/p>\n
Pathing Issues<\/h2>\n
The second issue is only if you use your screens\/components in a subfolder type system the url pathing to find them breaks under webpack code.\u00a0 So when you have something like this:
\n
\/app\/components\/blah\/\n-blah.js\n-blah.html\n-blah.css<\/pre>
\nand inside your blah.js you have code like this:
\n
Blah = _decorate([\n...\ntemplateUrl: 'blah.html'\n...<\/pre>
\nThis will fail; ALL the JS is actually bundled into the webpack'd bundle file; so when it goes to try to find this file, the JS code is running from the root directory of your app.\u00a0 Where your actual html file is not in the root.\u00a0 So you have to change the path to be:
\n
templateUrl: '.\/components\/blah\/blah.html'<\/pre>
\nPretty simple fix if you know about it; but man if you don't it starts crashing...<\/p>\n
Crashing on Startup<\/h2>\n
The final issue is simple and complex at the same time.\u00a0 NativeScript iOS runtime has some built in short-circuits for __extends and ALL the Native objects (i.e. like NSObject, NSString...) -- well Webpacking unfortunately changes the signature of the __extends function and so the runtime doesn't detect that the function is actually a __extends...\u00a0 This causes the runtime to run code that isn't actually supported and so it, well, crashes...\u00a0\u00a0 This can be solved in one of two ways;<\/p>\n
    \n
  1. You edit each of the plugins that are installed and manually strip out the __extends function.\u00a0 (and then let the plugin author's know to disable creating the __extends in their plugin as this code normally is just pointless and a waste of space and memory, and in the webpack case it is now deadly -- So just add \"NoEmitHelpers: true\" to the tsconfig file).<\/li>\n
  2. You add a simple plugin that I wrote to your main project directory; this plugin will automatically strip out all __extends while it is webpacks so that it doesn't matter if the plugin author forgot to set that flag; the simple plugin eliminate it.<\/li>\n<\/ol>\n
    \/**********************************************************************************\n * (c) 2016, Master Technology\n * Licensed under the MIT license or contact me for a Support or Commercial License\n *\n * I do contract work in most languages, so let me solve your problems!\n *\n * Any questions please feel free to email me\n * Version 1.0.2                                      Nathan@master-technology.com\n *********************************************************************************\/\n"use strict";\n\nfunction eliminateExtends(pre) {\n    var i = pre.indexOf('var __extends = ');\n    if (i === -1) {\n      return pre;\n    }\n    var x = pre.indexOf('};',i);\n    return pre.substring(0,i) + pre.substring(x+2);\n}\nmodule.exports = eliminateExtends;<\/pre>
    \nYou copy this code into an eliminateextends.js file in your root folder of the project; and modify your apps webpack's config file to use this as a loader plugin.<\/p>\n
    Please note this is not all the bugs in webpack; there are a couple others on the https:\/\/github.com\/NativeScript\/NativeScript-Dev-WebPack\/issues<\/a> repo that we didn't run into; but these were the only ones that we ran into for a iOS NG2 project.\u00a0\u00a0 So make sure you check out the bug list if you are still having issues...<\/p>\n
    Happy NativeScript-WebPacking!<\/p>\n","protected":false},"excerpt":{"rendered":"
    The NativeScript team released a cool plugin using the \"WebPack\" code to packup the entire code base and since it does things like tree shaking; your end result is a much smaller app. Well I had an opportunity to test it over the last couple weeks for a friend of mine (Nathan Walker) as he… Continue reading NativeScript: WebPacking<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[15,7],"tags":[16,75],"class_list":["post-342","post","type-post","status-publish","format-standard","hentry","category-nativescript","category-performance","tag-nativescript","tag-webpack","entry"],"_links":{"self":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=342"}],"version-history":[{"count":3,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/342\/revisions"}],"predecessor-version":[{"id":352,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/342\/revisions\/352"}],"wp:attachment":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=342"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}