How do you separate javascript files for development? - javascript

I wanted to create a javascript code library that will be eventually merged into one single minified code file. I was trying to search on how to be able to have these code files separated for development, but I could only find how to have a javascript file add a different javascript file to an existing html page. How do you separate javascript files for development only?

Develop each module of your library as separate .js files then setup a task running tool such as Grunt. You will need node.js along with npm to install Grunt.
You can then use the grunt-contrib-concat plugin to concatenate your javascript files together, and minify it using grunt-contrib-uglify.

These files are separately developed and combined into a single file generally known as minification and bundling, you could use asset compressor in Ruby on Rails in case you are developing in Ruby, otherwise pure javascript development uses Grunt based system, check UglifyJS.

Related

How do I bundle, minify and transpile JavaScript code using ASP.NET bundleConfig.cs

I have an old ASP.NET site which using using the built in bundling and minification using the bundleConfig.cs
This is great, however when I have added some ES6 syntax to my JavaScript it no longer minifies correctly.
Is there a way to transpile the code first before it is minified without having to install NodeJs and using Bable as per the following example? Is there a way I can use Babel straight from the ASP.Net website before the files are minified?
https://www.slightedgecoder.com/2017/05/22/setting-es6-environment-asp-net-mvc-5/
The problem is I don't really want to have to convert every JavaScript file to have exportable functions etc as the code base is quite large. Unless there is a way which I can export all the code in a JavaScript file in one go and import just the files into a new master js budle file?

Haxe -> Javascript target for CommonJs (NodeJs) style output

Haxe's JavaScript exports everything in a Haxe compilation into a single output file. This is great for building applications. For a general purpose library, however, it would be nice if it output a *.js file per *.hx file within my compiled sources.
The intent of this is so that I can create a NodeJs module where the consumer of the library only needs to require() the particular files that they would like to use. Is this currently possible using the Haxe compiler on its own, or via an external tool?
There is the hxgenjs library that can generate one js file per haxe class/enum.
https://github.com/kevinresol/hxgenjs
I see 2 different questions here
How to output Haxe module as a NodeJS module?
How to build each JS file into separated output file?
As for #1 there is #:expose directive and it should help.
As for #2 you can use --each and --next in your build *.hxml file. This way you can specify several targets at once(and they will be built at once too). Unfortunately there is no way to use the mask so you will have to list all your entry points(modules' roots) manually.

Can Webstorm automatically include project js files in html, or merge them into one?

I am using Webstorm a start a angularjs project. I've created a lot of *.js files. I have the include them using the tag one by one in the html files. whenever I created a new js file, I have to create the script tag.
The things I needed is just like gulp-concat, but without minifying. minified code are hard to debug.
Can anyone help on this? Thanks!
WebStorm doesn't have any built-in functions for combining files... But there are plenty of different tools on the web - plus you can create your own batch files for this.
I can suggest using Grunt grunt-contrib-concat task (https://github.com/gruntjs/grunt-contrib-concat). It supports merging files. You can run the task using Node.js run configuration, or configure it as a file watcher, or use Grunt console.
Browserify (http://browserify.org/) is one more way to go - it allows using commonjs-style syntax when developing front-end applications, combining the files into a single file for production
Or, try Webpack (https://webpack.github.io/) - it's a modern powerful module bundler

How to use Gulp to fetch external javascript files

I'm fairly new to using Gulp, but i've been starting to play around with it and the fact that I can run a server with livereload just by typing 'gulp' makes me wonder where it's been my whole life.
I tend to use CDN's for external libraries but am now working on a project that doesn't allow calls outside the network, meaning I have to include the js files. Is there a way with gulp that will fetch all external javascript files, place it in one single file and minified?
I'm pretty sure you are looking for an asset like this:
gulp-bundle-assets
https://www.npmjs.org/package/gulp-bundle-assets
You can also look at these Gulp plugins for help with CDNs:
gulp-s3: With this you can uploads your static files to Amazon S3 at build time.
gulp-google-cdn: This will replace all references to 3rd party libraries with Google CDNs

Visual Studio 2012: compile more TypeScript files to one JavaScript file

Is it possible to set a "compiler" option to compile more TypeScript files in one project to one JavaScript file?
The only solution I can find is passing multiple files to the "tsc" manually by hand, but I'd like to use the features of the IDE Visual Studio 2012.
I am using bundling to do this in ASP.NET. You can use bundling with MVC or Web Forms.
If you are using Web Essentials, you will already be getting both a .js and a .min.js and bundling is clever enough to use the .js files at debug time and the minified versions in production - so you can debug easily but get smaller files in live.
You can read all about Bundling and Minification on the ASP.NET site.
However, if you want TypeScript to bundle the file (it won't minify it) you just need to use the following flag:
tsc --out combined.js app.ts
TypeScript will walk the dependencies and sort out the ordering for you so all you need to worry about is minifying the combined file.

Categories

Resources