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.
Related
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.
I am currently running a create-react-app, using react v16.2. I would like to use Optional chaining from ECMAScript 2021 (ES12). What governs the ECMAScript version in my app?
For example, in a nodejs backend app I know I need to upgrade my version of node, but I'm unsure how this translates to React.
EDIT - I'm currently on v16.2 and when i try to use optional chaining, I get an error message asking me to use a babel polyfill.
React uses Babel to transpile and polyfill the code i.e. convert your ES2015+ code to ES5 syntax. create-react-app uses Webpack as the build tool and Babel as the transpiler so you should safely be able to use the optional chaining ? syntax and when you run / build your app, it will work as intended.
Babel is what decides this, it's a JS-to-JS transpiler. In create-react-app, you get whatever plugins and presets the maintainers decided on, unless/until you decide to eject so you can manage your own config. If you do decide to do that, you can start with the config they provide and then add new babel presets and plugins on top of that. As of a couple years ago, there's no good way to add to their config without ejecting. For your specific need, it looks like they include that plugin, so if your dependencies are up to date, you should be good to go.
I'm currently trying to understand about babel configuration, but got confused by babel-preset-**, there are many preset in babel, like env, es2015, react and others, I do understand that babel-preset-es2015 is needed to transpile es2015 code to previous js code so it can be understood by most/older browser, what about babel-preset-env?
What are the differences between those presets? Can one use env without using es2015 or vice versa? and what are the cases when we need those two presets to be present on our project build system?
Thank You.
The babel-preset-es20XX (15, 16, 17) presets include transforms needed to convert features added in that specific year to code that is compatible with the previous version.
babel-preset-env includes transforms for all features that have landed in the spec, but only enables the ones needed to make the features work based on the set of environments you've provided to it. If you pass no options to env it essentially works like es2015, es2016, es2017 all together.
babel-preset-react is the set of transformations needed to convert React/Facebook-related syntax extensions like Flowtype and React's JSX.
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".