I am using Sencha Cmd v7.3.0.19 and Ext JS 7.2. I have some third party libraries which I do not include in the bundle. So they are only copied during the build. But when they are copied, they are also compressed, which is what I don't want. I want them to be copied as they are.
How can I disable compression for third-party JS libraries?
Thanks,
Ipek
With the help of #ArthurRubens, I realized that I had to put my JS assets, the ones that I do not want to be bundled or compressed, into the resources folder. By doing that, they are copied as they are to the build output folder.
After that, I have also added the JS resources to the "list of JavaScript assets" section in the app.json file, but this time with remote: true, so that they are just referenced, not being copied.
Related
I'm using create-react-app and Semantic UI React to create a web part for SharePoint. (2016 on-prem. Started as 2013, so I wasn't able to use SPFx, so it's just regular old React.)
I created the solution as a Farm solution, so I could map the Layouts folder, and the CRA build output (.js and .css files) is getting deployed to the Layouts folder. I've also mapped the 16 hive folder on the dev server as a drive on my development machine, so part of my development process has been, after running npm run build, to copy the bundles directly over to the server so I can check on my changes/progress etc., without going through the usual SharePoint deployment process.
I have only ever copied the .js and .css files, and the icons used to work.
Now however, the icons are not showing up any more, and it looks like the code is trying to load icons.[hash].woff2, icons.[hash].woff and icons.[hash].ttf from the build/static/media folder in the CRA app.
Specifically, I'm seeing 404s for
https://servername/static/media/icons.[hash].woff2 etc.
Now, I would prefer to get the icons bundled in with the regular .css (and/or .js) files, so I don't have to worry about the media folder. However, I don't really have a problem with having to deploy the icon files in a media folder as well, but I would need the React build to know the correct place to look for them which would not be in
https://servername/static/media
it would be more like
https://servername/sites/my-site/_layouts/path/to/my/feature/media
So how can I either
get the icons bundled in the .css/.js files
or
indicate to CRA/Webpack the place where those files will actually end up, so the app is looking for them in the right place?
Bypassed the problem by switching from bundling the Semantic UI CSS to pulling it from the official CDN, which makes it pull the icons from a CDN somewhere, so I don't have to deal with them.
I want to automate the injection of new js/css files to my ionic project. So, I found this really useful article, which shows how to do it using gulp inject, but just with my own js/css files (those in js/css folders).
If I now install another external library using bower, for example:
bower install angular-google-maps --save
That library is not automatically injected, because it's installed in lib folder, outside js folder, as it's a library from an external vendor.
I guess I should have another gulp task to minimize the external libraries installed with bower, and put them into js folder to make them injectable. Am I right?
Yes, you are right.
Quoting your article:
There is all of kinds of additional functionality that you can perform with gulp such as minifying of css and javascript files, running npm/bower commands, or running sass compile commands. The gulp-inject is just one module.
You can use a module like main-bower-files to retrieve these files and do whatever you want with them.
You can also have a look at this answer to get a starting point.
I have a problem with a MEAN.js app in that its really slow to load and from the inspect i can see that its loading js in 70 different files.
Couple of questions
Why is there so many js files seperate? Can they not be merged into one and served quicker like YSlow advises?
Edit
'modules/*/client/*.js',
'modules/*/client/**/*.js'
Folder Structure
modules/savings/client/controllers/client.controller.js
MEAN.js has that particular aspect covered. In fact, if you run your app using just grunt command, the app will start running in development environment, and so the js files (either the ones from 3rd party libraries or even your custom js files) are not concatenated nor minified. This helps you while debugging. However this is clearly not good for an app in production in terms of performance.
If you use the command grunt prod your app will start running in production mode and so your custom js files will be concatenated and mninified. 3rd party library files won't be concatenated but grunt will use the minified version of them.
You can see which assets will be loaded for both development and production modes in config/assets/development.js and config/assets/production.js, respectively.
Also if you want to see what are the differences between both grunt and grunt prod tasks you can check your gruntfile.js.
Note 1: The commands I mentioned about grunt can also be used with gulp, since MEAN.js has both a gruntfile.js and a gulpfile.js defined.
Note 2: If, by the time you use grunt prod and still have so many files being loaded, that means you are using an high number of 3rd party libraries and a possible solution for that case is to concatenate 3rd party library files into a vendor.js file however in doing that you might run into trouble, such as some libraries like AngularJS needing the files to be loaded with a specific order. You will need extra caution if you edit your gruntfile to implement such task.
In VS.NET 2015, I've added a reference in bower.json for angularjs. This caused the angularjs package to be downloaded, which I can see in the Bower folder.
However, I'm not able to execute any angularjs code. I do have an ng-app in the HTML tag. If I add a CDN reference to the angularjs library, it works fine.
What am I missing to use the package downloaded by Bower?
what are you missing is referencing the downloaded libraries in bower_components folder in your index.html.
For example let's say you added restangular to bower. the library while reside in ./bower_components/restangular so in your index.html ( your SPA). you will reference it like this :
<script src="../bower_components/restangular/dist/restangular.js"></script>
Beware sometimes you should add all the library main files ( js and css), for that you need to check the value of the main attribute included in the bower.json of the library . for our example in bower.json in ../bower_components/restangular/ we have:
"main": "./dist/restangular.js",
In a the file .bowerrc you may define the directory for the downaloaded libraries in my example it will be bower_components.
In your .csproj file add the
<Content Include="bower_components/restangular/dist/restangular.js" />
Use can see this example
Since more than likely for production deployment you won't be deploying things in bower_components directory, I suggest you setup a gulp or grunt task to copy all the JavaScript that you are going to use and probably minify and concat / bundle them into a folder in wwwroot like /lib or /js or whatever your convention is going to be and add a script tag pointing to that bundled version. There is a decent walkthrough by Mads Kristensen from the recent Build event that you might want to look at. He demoed all the things you would probably need to get your app running.
I have a mobile application crated using sencha touch. The app skeleton was generated by sencha app generate. So it contains app.json, app.js etc files and folders. But as I have a lot of extra js files I used a .jsb3 file to build the project. So right now I build it by
sencha build -p /path/to/project.jsb3 -d target/folder/
Now I want to make this build system latest Sencha Cmd 4.0 compatible. How do I do it?
As Lorenz Meyer points out, you can try to use the "requires" keyword on the relevant classes to include your extra JS code. This assumes the JS files you're talking about adhere to the Sencha class system.
Additionally, Sencha Touch's app.json file has a "js" array you could use - this array loads arbitrary JS resources, even ones which don't adhere to Sencha's class system.
You could also use Sencha Cmd to manually compile the additional resources... but that's an advanced topic and would require detailed knowledge of your code to really offer advice.
If all else fails you can just include these JS files in your index.html, loading them from the /resources/ folder (which gets automatically copied into your build output).
At the end of the day, there's no specific migration path for your case - but the above methods are generally the ways to go.
Another point to think about is that each file should contain one class defined by 'Ext.define' and whose name corresponds to the file path ( e.g. The file in /app/view/Main.js should contain the class AppName.view.Main.
I don't know if this is a prerequisite for using Sencha cmd 4.0 or if it is only recommended.
You should not include the javascript files manually in your HTML, as long as they contain ExtJs code and not plain javascript or third-party scripts. Sencha cmd also compresses the files using YUI compressor and builds the theme css in such a way that it only contains required code.