Looking at some boilerplate's projects on github like:
https://github.com/KunalKapadia/express-mongoose-es6-rest-api
https://github.com/kylealwyn/node-rest-api-boilerplate
Some of them still use Babel. Node already supports almost all new features on ES2016 and ES2017 (Except Experimental). The only thing left is Modules. There is another reason to use Babel on Node projects?
It really depends on your Node engine version, so simply check Node Green Project, You'll see how much Node covers ES6,7 and....
However, I would mention this that sometimes you are going to use Node Version 4 deliberately, for instance, when you want to deploy to AWS Lambda, you should set your project engine to 4 and in this case, you need Babel if you are coding in Fully ES6.
Related
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
I'm trying to figure out the build process for react native and what exactly it is that both the metro bundler and babeljs do. In particular what allows me to use ES5+ syntax. I'm finding some sources that seem to tell me something different. This source says:
Metro combines all javascript code into a single file and translates
any Javascript code that device wont understand ( like JSX or some
newer javascript syntax )
This one says:
React Native uses Babel to convert React syntax and the newer ES5+
syntax into code that can be run in a JavaScript environment that
doesn’t support those features.
So now i'm confused what exactly both do. Also i've found this in the above source (and metro documentation):
Metro. The transformation process is described as:
All modules go through a transformer. A transformer is responsible for
converting a module to a format that is understandable by the target
platform (eg. React Native). Transformation of modules happens in
parallel based on the amount of cores that you have.
This sounds exactly like the transpilation that babel is supposed to be doing to me, or is this something different? Appart from that i'm confused what the resolution part of the bundling process works and how exactly it works in parralel to the other steps, but maybe that's a topic for another question.
There is a lot of confusion about how everything works together (React-Native, Typescript, Metro, Babel with presets). I will try to describe it.
React-Native is based on ReactJS (UI Framework for developing Web-Apps) which coding language is JavaScript.
JavaScript has some downside and therefore there is the possibility to take advantage of TypeScript. TypesScript is configured by a tsconfig.json file. There you can configure which files need to be transpiled to JavaScript and which should not. If you start e.g. yarn build:ts and have a configured output directory like /dist you will find the transpiled JavaScript code in that directory.
Metro is a JavaScript bundler. It takes in an entry file and various options, and gives you back a single JavaScript file that includes all your code and its dependencies and is started by e.g. yarn start and configured by metro.config.js
Metro has three different stages:
Resolution:
Metro needs to build a graph of all the modules that are required from the entry point. To find which file is required from another file Metro uses a resolver. In reality this stage happens in parallel with the transformation stage.
Transformation:
All modules go through a transformer. A transformer is responsible for converting (transpiling) a module to a format that is understandable by the target platform (eg. React Native). Transformation of modules happens in parallel based on the amount of cores that you have.
Serialization:
As soon as all the modules have been transformed they will be serialized. A serializer combines the modules to generate one or multiple bundles. A bundle is literally a bundle of modules combined into a single JavaScript file.
So, as far as I understand Metro is using Babel in its transformation step. I think that this piece of information is missing in a lot of documentation and explanations. There is no information on that point! Therefore, Babel uses Plugins which tell Babel what to transpile and how to transpile JavaScript Code (e.g. JSX Syntax) from one format to another one.
As you can see in the babel.config.js file, the name of the preset is: metro-react-native-babel-preset, which indicates the usage of babel by the metro transformation process.
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
I want to write a JavaScript example and run it to see how something works.
The sample code might require a browser but not always. I'm open to two solutions, one that works with NodeJS, and one that is used for browser based code. In browser, I'm using React with class and other ES6 syntax including import/export which is not (yet) supported directly by node or node --harmony.
In Python, Java/Groovy, C/C++, C#, others, I could just run a command to compile the file and then run the executable (or just interpret the code), so I'm looking for something similar for JavaScript.
Conceptually, I would like to say:
dotranspile --out bundle.js main.js
node bundle.js (or firefox index.html, which loads bundle.js)
The key is that I don't want to have to create a webpack configuration file in every directory. I thought I found a command like this when searching one day, but can't find it now.
How do other people run javascript sample programs when babel/transpiling is required? I would also like to be able to save them for future reference (in some cases).
Currently, each time I want to write a test I create a directory with a webpack.config file, package.json, and use npm install, and npm run to run the code or start a NodeJS express server to serve index.html.
This seems to be a lot of overhead for a quick test, and it results in dozens of node_module directories with tons of files in them.
Maybe is not answer that you want, but you can always use jsfiddle with babel + jsx. I think that jsfiddle is very good tool for quick run simple app in babel/jsx or other libs, transpilers etc.
The official docs for React describe how to generate a production build with webpack using UglifyJS plugin and how to validate that one really is using the production build in a browser. However, I'm using NodeJS 7.x (and hopefully will switch to 8.x soon) and I'm using Babel preset-env, because I don't want to compile ES6 features supported already by NodeJS (e.g. async/await) to ES5. Thus, I can't use UglifyJS plugin, because it doesn't work with ES6 code yet. I tried switching to Babili, but its default preset does some unsafe transformations (see https://github.com/babel/babili/issues/570) that cause my code to break. I can modify the preset to use only safe transformation, but the thing is that I'm not really interested in minifying the code, as it will be executed only on the server; I'm only interested in removing dead code that might eventually slow down the server.
So what's better? Is it better to use a minifier like Babili and configure it to only remove dead code using safe transformations, or maybe it's better to use Webpack Resolve#alias to load production build of React from dist folder?
Is there a way to get ES6 in sails.js?
SailsJS is just a framework written via ES5 syntax and it doesn't need to support ES6.
You can write project with ES6 syntax as you usually do and use Babel\Traceur\whatever for running.
My flow is following:
Create Sails project;
Install babel as devDependencies;
Update npm start script in package.json with "start": "babel-node app.js";
That's it. I can write ES6\7 code in my controllers\models\etc and run the server via npm start command. It works as usual as you wrote it with ES5 syntax.
Babel Transpiler
Babel Node
You need to check compatibility of ES6 with node.js instead any framework like sails.js, express etc.
Because at last node.js will change the javaScript to server side code.
So it doesn't matter which framework you are using.
You can use the sails with ES6:
For ES6 compatibility check kangax.github.io.
Recommended :
Sails v 0.11.0 or greater
Node v 4.. or greater
npm v 2.14.4 or greater
Now you are ready to explore new Ecmascript6 feature.
You will get the new feature from http://es6-features.org/.
TEST :
Code:
ecma6Test:function(req,res,next){
var evens =req.body.evens
odds = evens.map(v => v + 1);
res.json({sucess:true,'odds':odds});
}
Request:
{"evens":[2,4,6,8,10]}
Response :
{
"sucess": true,
"odds":[3, 5, 7, 9, 11]
}
This is a node.js question not specifically sails. Yes current version of node.js support certain ES2015 standards depending on your Node.js version and flags you use when you start your server.
Most features are already active, however to use all features, you would use node app.js --es_staging or node app.js --harmony in your project folder instead of sails lift
The following link provides updated information on what features current version of Node support and how to access them.
https://nodejs.org/en/docs/es6/
Vishnu's answer has you covered.
The explicit list of ES6 features available in the latest node release is here https://nodejs.org/en/docs/es6/
Which ES6 features ship with Node.js by default (no runtime flag required)?
let (strict mode only)
const
function-in-blocks (strict mode only)
As of v8 3.31.74.1, block-scoped declarations are intentionally implemented with a non-compliant limitation to strict mode code. Developers should be aware that this will change as v8 continues towards ES6 specification compliance.
Classes (strict mode only)
Collections
Map
WeakMap
Set
WeakSet
Typed arrays
Generators
Binary and Octal literals
Object literal extensions (shorthand properties and methods)
Promises
New String methods
Symbols
Template strings
Arrow Functions
There is the sails-hook-babel hook that might work out for you. It doesn't work for me, as I explain below, but I hope it gets higher visibility, is improved, and then this answer will be more relevant.
Currently, as of v6.0.1 the library will work for files loaded after the sails hooks run. This means that if you want to use ES2015 in e.g. your config/routes.js file, you will get a syntax error. But as suggested in this issue, it should work for e.g. files in the api folder.