Babel and large files - javascript

I have one big javascript file and I want use babel on it. But file have around 100k lines (~2.8 MB) and I got message about limit to 500kb.
I'm using babel-cli with preset 'env' on Windows (installed on machine, not web version)
Is there way to compile such big file with babel?

Related

Convert npm packages to plain JS source tree

Is there any canonical way to create a plain, non-minified JS source tree (eg. using ES modules), that just runs on the desired target (nodejs / browser) from NPM packages?
I like do work in a small non-IDE environment, and never use packaging by myself for small projects. But third-party code is almost always shipped JS and TypeScript inside npm packages that use sophisticated build environments (just got npm, tsc, yarn, parcel, rollup, ... needed to build a single 3rd-party module).
So I would like to have all those build tools "do less" and just emit plain, human-readable JS with somewhat sane file structure (eg. like single file or original source tree). Basically convert a bunch of referencing npm packages to a sane source code tree that doesn't need megabytes of tooling to build itself anymore.
Any ideas welcome!

How to Bundle javascript file without using npm or nodejs? [ Standalone javascript bundler ]

I am working on a project and I am not using any nodejs or npm package, But in the Production site, I want to upload the "bundled and minified javascript" file.
Is there any way to bundle a javascript file without using npm or nodejs?
update: I am using Apache as a web-server. It's a simple static website, but I have 5 JS files. I want to bundle them all in one just like how webpack does with the bundling of all files and combining them all in one with minification.
Thanks

How to use Bundler and Minifier in deployable web applications and installer projects

This is about how to use Visual Studio 2017 with both Bundler and Minifier and also the "Visual Studio Installer Projects" extension.
My web app has only one main page, so the <script> tags are all there on one ASPX page, about 40 of them as there are 40 JS files. When I run bundler and minifier, I want one script tag to point to the bundled and minified JS which is now in one file (and CSS is also bundled from 7 files to one)
When running in release mode I want to use the bundled and minified version so its a simulation of what will be running when live.
When running in debug mode I want to use the unbundled files so I can debug the javascript in the IDE and see the CSS in f12 etc.
I think this means that my one page, a.aspx, has to have two versions ?
When building using the installer projects extension, I want to build only in release mode and that would be using the single bundled JS and CSS files, I don't want the other uncompressed javascript and CSS files shipping in the project even though I want them there when debugging.
How do we go about setting up a project to achieve this ? Is it even possible ? or do people write code to copy out the projects and edit the project files before compilation ?
thanks in advance

Benefits of bundling NodeJS/TypeScript application using webpack

I'm building node/Express application and want to utilize 'latest and greatest':
node/Express + TypeScript + webpack.
Question: What are the benefits of using webpack to bundle all my nodejs code into one file? Just trying to understand if it is an overkill to use webpack for such purpose.
I think the biggest win you will get with Webpack would be Hot Module Replacement (HMR).
During development, if you were to use a tool like nodemon to watch for file changes you would have to wait for a full restart of your node application, whereas with Webpack HMR it will only update what is changed speeding up your development process. The upfront costs of setting up Webpack definitely payoff over the course of development.
Webpack also gives you the ability to use loaders. In your case using TypeScript you would likely want to use the ts-loader to transpile your code into standard javascript code that is compatible in your node environment.
Good that you're using the good combination of languages at the server-side.
First of all understand why should we use Webpack.
Webpack is used for module bundling by the builds we’re generating. As a best practice, we should not run the source directly.
Also, there two common modes available by default in webpack are,
Development
Production
Development build produces source map files and it’s not minified and uglified. It holds the information about the source files and even it is compressed and compiled it is easy to debug the development build.
FYI, my development build file size is just ~51KB since I use mongoDB in my stack.
Production build compresses our source code into a minimized single file but performs the same task as source code does. It won’t produce source map files and it’s uglified and minified so the debugging is not possible. My prod build file size is just ~9KB.
Notice the size difference after the file compression from dev to prod.
So, I recommend to use webpack not only for bundling, also we can configure transpiler options using loaders in it.
Note: Webpack can be used for both Client and Server side.
Happy Coding!

Web Essentials, command line utility to bundle script files?

I'd like to start bundling our javascript files. I've found that it's really easy locally using the web essentials plugin, however I need to set up the build server to generate the bundled .js file.
I'd rather not check this generated file into TFS as it will cause conflicts for our developers, and also since it's generated from the source I feel that the server build should generate it.
Is there a command line utility for doing the script bundling outside of visual studio that could be used as part of a build script? My google-fu is failing to find one.
Many thanks,
As long as you wrote it as proper AMD modules, require.js comes with a tool to turn all your files into an optimized bundle.

Categories