JS build tool without node - javascript

I am a fan of grunt. But unfortunately, we do not have node and hence the ability to access npm packages in our work environment. I have been creating a HTML5 application using AngularJS+Bootstrap etc. I have been able to start and develop the app using angular seed.
However, my main problem is the build (obfuscation and minification) process for such a project. Since ours is a protected environment, I cannot leverage help of other tools like coffeescript etc. I need some tool which may be as good as grunt, but would be available for download directly.
Any help is appreciated and thank you in advance.

Related

Visual Studio 2019 and Babel, Release Build Compile Javascript into ES5

I'm attempting to setup an automated process for compiling ES6 JS down into ES5 when we build.
Its frustrating not being able to use all the nice new features in ES6 because we need to support IE11 for clients.
What I want is a simple automated process, maybe something I setup in a build script, which runs BABEL and generates the Es5 code.
When we go live, our release build uses bundles, maybe the bundled JS can point to that generated JS file, and locally I just run off the ES6 version.
I've never done anything remotely close to this, and I need to be careful not to break things. Our internal js library is MASSIVE.
Has anyone attempted this, or run into a similar situation?
What I'm really looking for is some direction and/or suggestions.
Step by step would be great too.
Thank you guys.

Building SPA frontend without node/npm

I'm a back-end java developer (spring boot) and currently I'm interested in building a single page application.
What I like about SPA frameworks (mostly Vue):
Model-binding (saves boilerplate code)
Components and templates (separating code in multiple files is always good, but I don't like single file components as I feel they mix the view and logic)
Routers
However, unless you are using Node there seems to be poor integration
What I don't like:
Node (I develop backend in Java so I don't want to install node just as a prerequisite for NPM)
NPM (I already have dependency management in Maven/Gradle. I actually don't mind it as much, I just don't want to install it and manage it seperately)
I understand why stuff like Node, Npm, Webpack is necessary, it's just that I've already have Java/Spring/Eclipse doing all that for me. I have no desire to have basically two separate build processes.
TLDR: I like the direction and architecture of modern frontend, I just don't want to deal with the tools that are used.
Specific Question: How can I develop a modern SPA using Spring Boot, Gradle/Maven and Vue.js and not have to install Node/Npm/Vue cli etc. What are the best tools if there are any?
Thank you.
You can use maven frontend plugin hosted from here.
It is maven plugin that is leveraging downloading nodejs, webpack, gulp, grunt and running it on your codebase.
You will be able to run maven build and nodejs will be downloaded automatically. It will run your frontend build as well and in resulting jar you will have only necessary minified files.
However, you have to be aware that if you want to debug your frontend application it is a good idea to have those things installed and being able to run the app locally without minification of html and js files.
If you don`t want to download tools you can use helper scripts provided by authors of this plugin to use tools downloaded by this plugin.

Build for js environment without npm?

We are currently building our frontend js codebase (angularjs) using nodejs with grunt, which seems to be a popular setup, but we are not happy with this solution. Does anyone have suggestions for a build setup for e.g. linting, minimizing our js, running less, etc (in addition to some custom steps for angular in general and for our application specifically) without using nodejs at all?
I would leave it at that to avoid starting a flamewar, but here are, for context, some of the shortcomings of the current setup in our view:
grunt does not have even the basic functionality of a 1970s build system, like automatically re-building only files that have been modified based on file modification time
npm is causing constant headaches running on our build servers at every build
If grunt does not have even the basic functionality of a 1970s build system, why won't you use a 1970s build system then?
Just use make if that's what you're happy with. It still works fine. There's no reason not to use it if it you're satisfied with how it works.

Why angular 2 need node.js

I don't have experience in front-end but I want to create a simple app using Angular 2.
Why do I need to install Node.js as a prerequisite step? Why does Angular use Node.js?
There are a couple of things that Angular uses Node.js for:
Installing and managing packages. From the Quickstart tutorial:
Angular application developers rely on the npm package manager to install the libraries and packages their apps require. The Angular team recommends the starter-set of packages specified in the dependencies and devDependencies sections.
Compiling the TypeScript used into JavaScript that the browser understands - browsers can't process TypeScript natively and the SystemJS imports used in your code aren't supported in browsers yet:
We strongly recommend transpiling (AKA compiling) to JavaScript during a build phase before running the application for several reasons including:
We see compiler warnings and errors that are hidden from us in the browser.
Precompilation simplifies the module loading process and it's much easier to diagnose problems when this is a separate, external step.
Precompilation means a faster user experience because the browser doesn't waste time compiling.
We iterate development faster because we only recompile changed files. We notice the difference as soon as the app grows beyond a handful of files.
Precompilation fits into a continuous integration process of build, test, deploy.
node.js is required in order to install the library using the node package manager (npm).
It is not required to run an app using angular2, only to build it.
For any modern JS based application, as the complexity grows, the app becomes difficult to manage.
In order to make developing and managing complex applications simpler, there are frameworks such as Angular, React etc. and they provide number of tools for the same.
These tools are linting, scaffolding, running unit test cases, starting web server for local development, minify and creating build for the production use etc.
These tools are based on NodeJS as it is JavaScript only and therefore can be customize as per developers needs.
And that's the reason you need Node.js for Angular2 development.

How to set up an automated testing environment for AngularJS

I have spent hours trying to set up an automated testing environment for my AngularJS applications that I can run from Maven (capturing results in Bamboo)
A Google search reveals frameworks galore, based on Jasmine, Karma and generic JavaScript frameworks.
But for some reason the installation of these never goes as described.
Can anyone just point me to a set of downloads that I can install manually to proper directories, that will just execute my unit tests?
I asked a similar question previously and got down checked and requests to close. If you need to check me down, please leave a reason, as I am besides myself with frustration trying to solve this, and I am sure there many other developers experiencing the same issue
Testing javascript is not a totally mature thing, so there isn't a great diversity of good tools for doing so. Jasmine and Karma are the current best ways of doing that.
Those tools are best managed using bower, which is a nodejs package. So you'll have to install, in this order:
nodejs
npm (node package manager)
bower (using npm)
jasmine and karma using bower
phantomjs, and whatever other dependencies your javascript needs (presumably angular)
Then you can run the tests.
I found this package for maven with some brief googling, but god knows how to set it up:
http://searls.github.io/jasmine-maven-plugin/
There are many tutorials on going through this process. You have to accept that these are currently the best tools for doing this and give it your best shot. If you post more specific issues regarding the 'installation that never goes as described' of jasmine and karma you will get assistance.
you can use for example yeoman or angular-seed. both will require nodejs and optionally ruby. both will set you with phantomjs, jasmine, karma, bower and many more. however i would avoid combining that build with maven. imho it's far from perfect. java tools will never be as good as native js tools for building js project. if you really want to combine the builds then use java only to call nodejs and nothing more

Categories

Resources