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?
Related
I was thinking that what if we bundle all the classes we have into a single file but don't use babel to polyfill it to ES5 .
and if the browser didn't support rs6 use babel in the browser or load the polly filled bundle and add the dependencies manually.
i don't know if it's a good idea to do that , but i think babel adds a huge size to my bundle . i have 300kb of code (not minified) with almost no dependencies (only react and router).but after bundling and minifing i get a huge file with 1mb of size.maybe im doing something wrong here.i also used preact instead of react , but it didn't help me that much.
thanks in advance.
Babel shouldn't end up in your bundle. babel-polyfill might, if you need some features it provides, and it can be fairly large.
What toolchain are you using? If you use Webpack, you can analyze the bundle's size with e.g. webpack-xray (disclaimer: my project).
I am looking to work on an Angular2 datepicker component as if for release and inclusion in multiple projects. What is the best way to structure the project for this compared to a regular Angular2 project built with angular-cli? Are there any examples of good starter projects/seeds for such a task? Or should the component library actually be an angular2 application itself?
My initial assumption was that I could just create a standard project with angular-cli which has a single module (e.g. MyDatepickerModule) which contains a hierarchy of components forming the datepicker however I don't know if this is the best way as I don't need everything that a full application provides.
Thanks for any guidance!
I would publish the library with AoT compatibility in mind.
This means compiling the source using the ngc compiler. In the distribution package I would publish the JS source, original html/css files, d.ts typings files and the ngc generated metadata.json files.
I recommend publishing the JS source with es2015 modules since this will make your library tree shakable. I would target es5 JS, but with es2015 modules . TypeScript allows for this hybrid mode by setting module to ES2015 and target to es5 in tsconfig.json.
Publishing these files will make your library AoT compatible and Tree shakable.
This is all the consuming application needs in order to AoT compile your library into their complete application.
It's not recommended to publish TypeScript in your package since this would require the consumer to replicate your build environment (typings + TS compiler version).
You can also publish a JiT compatible umd bundle with inlined templates and css. This can be helpful since it might not be practical do AoT during development since compilation is a bit slow. The umd bundle will make it possible to use your library in a JiT based dev environment. For production though you should definitely use the AoT version.
The CLI is not ideal for publishing libraries since CLI is primarily a tool for building complete applications. They might support libraries better in the future though.
Check out https://github.com/angular/material2. A work in progress, it's a library of controls and themes for Angular2 applying Material Design and is an excellent source for learning to build your own control library.
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.
Is it possible to use WebStorm for developing HTML+JS projects WITHOUT writing my own (more and more) complex configuration scripts for babel/gulp/grunt/webpack or similar tools?
I don't need complex frameworks (like Angular or React), but importing multiple ECMAScript 2015 files, debugging and deployment should still be possible.
I found several Settings in WebStorm 2016.1.3, and they seem to integrate some tools, but they do not seem to (automatically) establish a working development system comparable with Visual Studio?
EDIT:
I would like to see my web pages in chrome and debug JS in WebStorm.
current browser and nodejs not full support es2015 feactures, you can use polifil like babel and for using systemjs dependancies (in browser for create bundle) you need use webpack.
You can use pure javascript without any dependancies if feactures is supported, refer to https://kangax.github.io/compat-table/es6/
You don't need gulp/grunt/etc.
WebStorm supports ES2015 just fine, and even some ES2016 features (e.g. async/await). You don't even need to configure a file watcher. Just define the "node" executable to be babel-node.
I'm working on a Dojo project that would like to start using Babel (aka 6to5) to transpile ES6/ES7 features to ES5. (I think the same question would apply to anyone using Dojo and CoffeeScript or TypeScript.)
Everything works fine if we run the Babel transpiler before opening pages on our website, but that's really tedious for development. We'd like to configure Dojo's AMD loader to automatically transpile JS files as they're loaded.
Is this possible? It seems like it might be possible if we define/declare an AMD plugin, but then we'd have to put a prefix on literally all of our dependencies, e.g. require["babel!myfile.js", "babel!anotherfile.js"] which seems unnecessary when we know that all of our JS should be transpiled.
Is there a way to tell Dojo/requirejs to automatically transpile everything?