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?
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).
Looking at the jQuery documentation on npm, I'm confused as to what I have to do to use it. I know that I can just include the script tag in my index.html to use it, but how does everything else work?
If I choose to not use the script tag, I understand that I can install with node and then import it with Babel into any file that I want to use jQuery in. But where does webpack come into play? I only have to use webpack's require if I'm not using Babel, correct? Is webpack's require an alternative to Babel's import?
It seems like either I can use Babel and Node.js or webpack and Node.js? I thought Babel and wepback serves separate purposes though, with Babel trans-compiling ECMAScript 6 to ECMAScript 5 and webpack bundling all your files into one. If I'm currently using webpack, Babel, and Node.js. What is the best way to include and use jQuery?
If you plan on working anywhere without an Internet connection, go ahead and npm install the minified version of jQuery into your modules.
Otherwise, I would use the CDN in the HTML file for easy global jQuery access. It doesn't really make a difference how you include it in your project in terms of webpack/babel methods; just be sure to stay consistent with how you import them. The only difference is that require is ECMAScript 5 and import is ECMAScript 6.
I am starting a new Web project and trying TypeScript, mainly as an ES6 transpiler but also with the additional benefits of type checking, especially for existing libraries such as jQuery combined with the DefinitelyTyped type definitions.
Since the latest version, TypeScript supports both its own internal modules and ES6 modules, which calls "external" modules. Because ES6 is more standard than TypeScript, my intention is to use ES6/external modules rather than the traditional/internal TypeScript modules.
I have my own code defined in several files/modules, but I want the build to generate a single .js file that I can load from the browser.
The problem is that as far as I can tell, TypeScript is only able to generate a single output file when using its own module format. If I try to use ES6 external modules, then it generates a separate .js file for each .ts file.
This means I would need to concatenate them using browserify, but also I want source map support, which means that I should configure browserify for input and output source maps, then combine it with exorcist so the source map is extracted out of the bundle.
That looks like a very complex build setup. Isn't there a more straightforward way, maybe directly supported by TypeScript? What is the best approach? What do you recommend?
Let TypeScript do what it does best...
Add types to JavaScript be it ES5/ES6/ES7
Transpile to ES5
Resolve modules via the specified module syntax (commonjs, amd, umd, system)
Then find another tool that will take the separate files and combine them into a single bundled file (in the right order). My suggestions are to look into:
webpack
browserify
tsify
Are you looking for a solution in the browser? If so, I highly recommend my project Zwitterion. It removes the complicated build steps, and let's you include TypeScript directly into the browser with normal script tags. You can also use standard ES modules directly, with no extra setup. It uses SystemJS under the hood to achieve that. There is no source map support yet, but that should come. If you would like more information besides what's in the README, you can read "Zwitterion, forget the build step".
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?
I was attempting to use Traceur for a few small client-side micro libraries that I maintain. I would like to refactor them to use "classes" and a few other ES6 features and then compile an es5 version for production.
However, once I add classes the compiled out requires the runtime which is really big for all I need (just extending constructor functions). Is there a way to configure it so that it puts just what it needs to run into one file like CoffeeScript?
You can build your own runtime by following the recipe in the Makefile and omitting the files you don't need. traceur is 'self-hosted' so you use the ./traceur command with inputs and flags to create an output file which is the runtime source. Start with make bin/traceur-runtime.js then whittle down the files until you have what you need.
We are working on an automated way to do this, but it's not likely to be done soon.