Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Do we need combine the transform-runtime and preset-env in an application? [closed]

Question 1

I find that there are many unnecessary duplications in the (webpack) bundle (output)result, to be specific, they all are the helpers(like classCheck, objectSpread(due to the object-spread plugin).

So, I want to reduce the duplications. If it's a library, sure, I will use transform-runtime plugin(refer to runtime-corejs3) to do this. But now this is an application, so, what's the correct way to do this?

Therefor I'm getting confused because the transfrom-runtime plugin is recommended for library(and is for the whole reduction. i.e. core-js, regenerator and the helpers). But here I just want to reduce the helper duplications, not others duplications because that has been done by babel/env.

So here the question I want to ask/discuss is that is it necessary to reduce the helpers duplications in an application, if yes, and how?

Question 2

The other question is, core-js/modules/es.promise.js and core-js-pure/modules/es.promise.js are exactly the same code, the main difference just is that the former has global pollution? If so, why core-js doesn't use(directly import) core-js-pure to polyfill and then add it to global? IMO, this will greatly reduce the duplications because at now the libs use transform-runtime(finally core-js-pure) but apps use preset-env(finally core-js), there is no shared/shareable codes between apps and libs, right?

like image 730
SmallTown NE Avatar asked Apr 14 '20 13:04

SmallTown NE


People also ask

What is the difference between @Babel/preset-ENV and @Babel/transform- runtime?

Important to note here is that @babel/preset-env respects your targets, and doesn't include unnecessary pollyfills, where @babel/transform-runtime will include every polyfillable feature, which leads to many unnecessary polyfills.

How does the Transform-Transform-runtime plugin work with core-JS-pure?

The @babel/transform-runtime plugin does some magic and inserts several folders with files in this package in node_modules. This is why @babel/runtime-corejs3/helpers or @babel/runtime-corejs3/core-js-stable folders exist in the first place. Now, the important part is that the files in these folders import things from core-js-pure.

Why when using @Babel/transform-runtime my app gets large?

So when you use @babel/transform-runtime plugin, it includes polyfills from the core-js-pure folder, and doesn't pollute the global environment. Why when using @babel/transform-runtime my app gets large? As explained above, your app code is bundled together with the polyfills for features like Promise.

What is the difference between experimental and feature proposals?

Experimental proposals are at risk of being dropped or modified at any time. Or a feature might already be "ratified," which means it will be included in the next release of JavaScript ("stage 4"). stage-0 - Strawman: just an idea, possible Babel plugin. stage-1 - Proposal: this is worth working on.


1 Answers

@babel/plugin-transform-runtime: add polyfills without attatching them to the global scope.

@babel/preset-env with useBuiltins: "usage": add polyfills to the global scope.

@babel/preset-env with useBuiltIns: false (default): Don't add polyfills.

So @babel/plugin-transform-runtime is recommended for both library and application to add polyfills.

babel.config.js:

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    '@babel/transform-runtime',
  ],
};
like image 95
Masih Jahangiri Avatar answered Oct 17 '22 03:10

Masih Jahangiri