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

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.

Related

Why JavaScript frontend framework is needed for Node.js to run?

When we talk about JavaScript vanilla it's frontend programming language; It needs a webserver like IIS, Apache or nginx etc to deliver the content to a client when requested. After that, JavaScript runs on client browser, but every video or article I found said we need to install node.js to make this work. What I know about node.js is its a runtime environment to make JavaScript work outside the browser; like for a backend api or regular desktop application.
Here is my question:
Why do we need to use Node.js if our target is to deploy a frontend webapp that's gonna run on the client browser?
You don't have to install and use Node to make frontend applications, but it can help a lot, especially in large projects. The main reason it's used is so that script-writers can easily install, use, and update external packages via NPM. For a few examples:
Webpack, to consolidate multiple script files into a single one for production (and to minify, if desired)
Babel, to automatically transpile scripts written in modern syntax down to ES6 or ES5
A linter like ESLint to avoid accidental bugs and enforce a consistent code style
A CSS preprocessor for Sass that can turn (concise) Sass into standard (more verbose) CSS consumable by browsers
And so on. Organizing an environment for these sorts of things would be very difficult without NPM (which depends on Node).
None if it is necessary, but many find that it can make the development process much easier.
In the process of creating files for the client to consume, if you want to do anything more elaborate than write plain raw .js, .html, .css files, you'll need something extra - which is most often done via NPM.
It's only for extra support during development, and ease of installing libraries. almost like an extra IDE / helpful editor
for example you might want to see changes you make on your HTML and frontend javascript code, without having to refresh the preview browser. node will provide a package that does that...
it also helps install and use libraries easier. for example, if you want to add a library like bootstrap to your frontend, rather than searching around and downloading the files... but if you use node project, you can simply use npm install bootstrap that will automatically download the lastest version from the right source.
that's all

Can i migrate my Node based project to Deno?

Hello I am a frontEnd developer.
First, I don't know much about the runtime environment.
Is it possible to convert my project into Deno with Node?
Even if I change all of my code,
I'm not sure if the libraries I've received can run in a Deno environment.
(too many libs...) (React, Apollo, many many many)
And since the current webpack settings are very complex and difficult to understand, (And I understand very little about the build system.)
I am not sure if this can work in a Deno environment.
In my opinion, it seems impossible, I will only use Deno when working on a new project, Or wait for someone to create a migration guide.
What do you think about this?
Add
Obviously, it would be impossible if the libraries I used were not registered in the Deno repository.
And second, there seems to be a node compatibility issue.
Now i am sure that i can't covert it to deno.
Thanks
There is Denoify.
This tool takes as input a TypeScript codebase that was meant to target node and/or the web and spits out a modified version of the source files that are ready to be deployed as a Deno module.
It also helps to deploy on both NPM and deno.land/x
However, it is still under active development, not all node builtins are supported yet and you will probably have to make some changes here and there on your codebase to comply with the requirement Denoify sets.
Also, I am the author.
You're using many npm packages in your node project.Deno doesn't work with them.So either you'll wait to deno to be mature enough or you're gonna keep building your projects with node until that time.So i think if you want to take full advantage of deno, you should wait for deno to mature
Any code you write in pure JavaScript or TypeScript will work both in Node.js and Deno.
However, it's more than likely you have used Node.js-specific features in your current project. requires, calls to native Node.js APIs like http, util, and many others will not work in the Deno runtime.
Also, these kinds of Node.js-specific APIs are used in most Node.js libraries, so you'll have to do a complete rewrite to Deno.
I am not sure enough but as you have a Node.js project you should be using npm packages so until and unless those npm packages you use have alternative Deno packages it isn't possible if not then as #IsaToltar said to wait for it to be mature enough.
but if you can tell us what third-party npm packages you use then we might be able to find an alternative Deno package for that.
I hope it helps.
Deno now supports node-based projecs + NPM, it is considered to be stable, although still a work in progress.
To learn more, take a look at:
https://deno.land/manual#v1.29.2/node https://deno.land/manual#v1.29.2/node/how_to_with_npm https://deno.land/manual#v1.29.2/node/std_node

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.

How to Compile TypeScript (on save) With Errors in Visual Studio

I upgraded to the latest TypeScript recently and have found that the JavaScript is no longer being generated in Visual Studio (2013) if there are any TypeScript type errors. Is there a way to tell TypeScript to ignore type errors? I'm cleaning up a project and would like to work my way through it incrementally.
This might not be the answer you are looking for, but it is the best for your scenario in my opinion: I think you'd be better off using a task runner (such as gulp, grunt, etc) that watches your files and compiles on the fly. It will ignore the IDE and do what you want it to do.
If you're using Visual Studio 2013, you can first install Task Runner. This allows you to run them inside a window in your IDE.
Then you'll want to setup your project using the given task runner of your choice and creating a task for it. Ted Patrick has an example using gulp here. Depending on the size of your project you might want to use TypeScript's incremental compilation features too.
I use that setup in VS13 and I couldn't be happier. Every time I save a TS file it is recompiled (regardless if it's considered valid by the IDE or not) and I see the errors right there. You can see what it looks like in this screenshot, and the VS13 project/task runner script is available on GitHub if you need a reference.
(If you don't want to be hassled with figuring out a task runner, the compiler (tsc.exe) has a -w command line argument that does all the watching too. You could just create a batch file that you fire once and run on the background.)
Even if VS13 has "native" ways to watch and compile a .ts file, I'd definitely recommend using something like this instead. It decouples your project from the IDE and gives you (or anyone else) the ability to easily compile your project from anywhere, as well as also use whatever other tasks you think are necessary when building the project.

JS build tool without node

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.

Categories

Resources