I want to write a custom plugin which will generate a few functions in the output bundle. And I know that in Webpack a developer can set field target to browserlist so webpack will understand how to build the bundle. And I wonder, is there a way to get what EcmaScript features are enabled in the current compiler configuration?
I know I can just write my function in ES5 syntax. But if there's the way, they can become much shorter.
The question is about getting information only from Webpack configuration. I don't think adding options to my plugin will be a good idea.
Related
I am starting to convert a JS codebase to TS and the codebase has different parts, some internal that I want to compile to the newest target possible and some external that I want to compile so they are as backwards compatible as possible.
How to set up tsconfig.json to do so? Is it even possible with one tsconfig.json? the compilerOptions option is for the whole project, right?
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 using both plugin and preset and my current react app but technically I am not able to make someone understand what is difference between preset and plugins. For me both are the javascript file which used by babel loader to compile the code.
In short, a babel preset contains multiple babel plugins.
For example, if you only use arrow functions, you only need the transform-es2015-arrow-functions plugin. If you use a lot of ES2015 features, you better use babel-preset-es2015 which contains a lot of plugins including transform-es2015-arrow-functions.
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".