I am using babel-standalone and I am doing the exact same thing as https://github.com/Daniel15/babel-standalone/blob/master/examples/scriptTag-src.htm, but I get the warning
You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
I don't know what to do. Shouldn't it just translate all my ES6 code to code supported by older browsers?
It's just a warning, nothing to worry about.
It's just telling you that you shouldn't run Babel in the browser on production sites, because running Babel in the browser is slower than precompiling your files with Babel, because the browser will have to compile your files every time you open a page. But if you're running it for development or personal pages, or if you just don't care (e.g., you don't have that much code), you won't need to worry about this warning.
Related
I'm using VSCode for a Javascript project that runs in a browser JS engine; it will never and can't run in Node.js. But Intellisense quite dramatically warns about features in my code that are deprecated in Node.js. Is there a way to tell it, that this is not a node but a browser project to get only relevant warnings?
Strikethrough in code and warning in Intellisense popup
if you use eslint as linter. You can do it in the .eslintignore file in your root directory.
take a look here: disable the warnings in VS code
I want to use babel to transform modern javascript to plain old ES5 JavaScript.
I used the first tool on babel's website "Prototyping-In the browser" and on the website it says
"... if you are working on a production site you should be
precompiling your scripts server-side"
after using that prototyping tool, the browser's console says
"... Be sure to precompile your scripts for production"
as a result I checked the second tool "Babel built-ins CLI" and used it with the help of node.js to generate the compatible JS scripts, the website doesn't mention the same message about production as the first tool I used, although the resulting code is almost the same.
My question is can I grab the resulting JS scripts from the "Babel CLI" tool and
just replace the current ones? is that enough for production? Are they considered precompiled?
Note that I am not using node.js, it is just a javascript application.
Searching around the web got me many results about precompiling JS such as using webpack and Browserify and now I am lost about the state of the files generated from Babel, are they ready to be used or should they be precompiled.
I am posting this question out of confusion, so my apologies if it sounds stupid or not reasonable.
Can I grab the resulting JS scripts from the "Babel CLI" tool and just replace the current ones? Is that enough for production?
Yes, that would work. However you will want to avoid this manual step of copying scripts into a web tool for every little change you make during development. It's better to work with an automated build flow.
Searching around the web got me many results about precompiling JS such as using webpack and Browserify
Babel only transpiles new syntax to old syntax. Webpack and Browserify also bundle modules into a single script that can be loaded into a webpage.
Due the fact, that ES6-modules (JavaScript-modules) are available for testing:
https://www.chromestatus.com/feature/5365692190687232
https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7
I wonder, how should I minify and prepare the project release-file? Earlier, I havde bundled all JavaScript-files into the single and minified file, except situations, where I have to load the JS-file dynamically via XHR or Fetch API.
As I understand, it's rather impossible to prepare a single-minified file with the ES6-modules right now or may be, I'm just misunderstanding some ways of work.
So, are the any ways to prepare my ES6-modules into single file and how I should prepare the modern JavaScript-project in 2017 year, where JavaScript-modules will be available?
I wonder, how should I minify and prepare the project release-file?
That is purpose of this action? Okay, minified files take fewer network traffic, and will be downloaded faster, but most NPM libraries provides minified dist-files already. And main question about bundling in one big file.
Why webpack do it? Of cource, due absence of support for ES-modules in browser by native, What's why webpack resolves import statements and round dependencies in synchronous manner*, and then substitute it to IIFE for scoping. And perform babel translation and polyfilling, yes.
But then native support of ES-modules is started, it's become un-useful. One of main goals when exposing your web-app to production, is minify traffic volume for your server, using CDN. Now you can do it in native way, so just import ES-modules from unpkg.org and be happy
*If not using HMR, of course, But it's not appropriate for production mode.
Live examples here: https://jakearchibald.com/2017/es-modules-in-browsers/
This blog explains how you would use the ES6 module syntax and yet still bundle your code into something that the browser will understand.
The blog explains that using SystemJs as an ES6 module polyfill and Babel along with Gulp will enable you to code you modules in ES6 yet sill be able to use it today.
https://www.barbarianmeetscoding.com/blog/2016/02/21/start-using-es6-es2015-in-your-project-with-babel-and-gulp/
Using this guide will help you write your code in ES6 while still having a normal workflow to building, minifying and bundling your code.
Keep in mind there are a lot of tools out there that will help you achieve this but I've followed this method many times and I can vouch for its validity.
I want to use babel with es6-module-loader. It works nicely however the size of it causes an issue in the browser loading. I can't use preprocessing with node.js, I have to compile modules on-the-fly and I don't need any other features from Babel.
With Babel, is there a way to only build it with some of features since I don't need them all?
As the ES6 spec is nearing completion, I'm investigating get a jump start on ES6 syntax and leveraging traceur compiler to do so.
My question is that I see that tracuer requires a 'runtime' file to be included on the page, is this a shim for some lacking 'core' features like Array/etc OR is this a runtime converter and then the build is just for deploying?
If its just a 'shim' per say, how do you deal with always compiling during development? I know you could do a watch in grunt but for large applications that seems very slow. I also saw you could use a node compiler, but node is not my backend/server tech ( I use IIS, ya i know ).
Thoughts/suggestions?