I am reviewing an application which uses Angularjs. The application has a single minfied javascript file included. With research, I have identified that the javacript file contains Angular.js source and defines the application's routes, controllers, ec cetera. I need help separating the Angular.js source with other codes in the file.
You can use gulp or grunt for build project. if your using gulp you can create two javascript files using gulp inside gulp.js file. one for dependencies and other one for project source files. And if you need minifi you can use gulp plugin for it. for more details check this link https://gulpjs.com/
Related
I'm trying to create a custom UI plugin in TypeScript
Here's the steps I'm taking
create a plugin project in a local folder
write .ts files for custom UI in the plugin project root
generate .js files out of those .ts files with tsc command in the plugin project root
go to the test NativeScript project and run tns plugin add <local plugin path> to include the created plugin
But I get compiling errors at step 3 because I have importing statements as follows
import { ContentView } from "ui/content-view";
import...
I referenced an example here https://github.com/NathanWalker/nativescript-cardview/blob/master/cardview.ios.ts
My question is how cardview.ios.ts in the example 'nativescript-cardview' is being compiled to cardview.io.js? It seems impossible to do this...
In the plugin, you have referenced the author has created a demo app and is using the declaration file for tns-core-modules from that demo. Look at this line where tns-core-modules.d.ts is included in tsconfig.json
You can follow this practice for testing cases and for your release you can create a relative path to the tns-core-modules (and references) declaration files from the app node_modules folder like done here
As a side note noEmiOnError flag in your package.json will allow the translation to continue without hanging on errors.
Thanks for linking to your repo. NativeScript's docs state that "if you are using a transpiler, make sure to include the transpiled JavaScript files in your plugin".
Your package.json specifies cardview.js as the entrypoint, but your transpiled JavaScript files haven't been added to the repo. I solved this problem in my nativescript-midi plugin by committing the transpiled files in a \dist directory. The plugin is written in ES 6 but transpiled to ES 5 for consumption. To make sure that the src and dist directories remain in sync, I use a git pre-commit hook that automatically runs the build command and commits the results. If you clone the nativescript-midi repo, you can view it in .git/hooks/pre-commit . A benefit of using this approach for your plugin is that it will also allow it to be used by developers who are not using TypeScript.
Say, I need to use Wysiwyg editor and I found a 3rd party directive for it.
It has a good readme and how to setup in my project(Local).
Demo link: Wysiwyg Editor
Considering that I have done all the npms and integrations in my local project.
How can I deploy the project with new changes?
Maybe I am asking because I don't know about gulp or bower. Does my project needs to have gulp ad bower in order to use such directives. If so, how will the deployment go post setup and integration.
Assumption : There are no gulpfile.js and bower setup already.
In Jquery using a plugin is quite simple. Add a script tag for js file of plugin and use it in html or js as instructed. Does the process has to complicated always for using a 3rd party angular directive?
No. It is not compulsory to use gulp. Gulp just runs task like adding css,js to your file , minifing it and like.
you need to add js file which contain directive code. In your case it is
this is your link of directive
Now you can save this data in one of your js file and add it in index.html
OR
you can give this online link.
Using external directive need to add js n css file.
Question is will it work? We have to see dependancies of any external module we are using so what are dependancies of this module?
enter link description here
you need to add this module also
ADVANTAGES:
Using bower: you can install module in your project. bower install will download all your dependancies also.
using gulp : Gulp task will make sure of adding your css and js files in index.html
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.
I am trying to create production build through the command "sencha app build production"(sencha 5.1.3). It gets created but some of the view is not being served.can some one suggest that how I should ensure all the required js file has been loaded so that the minified app.js should serve fine. Or there are some other steps to create the production build.(I am using sencha 5.1.3)
In order to have all files included you have have to reference them somewhere with one of the config requires, uses, controllers, stores, views, etc.
Sencha cmd determines also the order of inclusion with these configurations.