CODEWITHSUNDEEP
reactjswebpackecmascript-6code-splittingdynamic-import
javauser35
javauser35

Reputation: 1315

How to set babelrc file and why?

I have questions about babel.rc config file.

I searhed and saw two different config file examples.

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": ["syntax-dynamic-import"]
}

and

{
  "presets": [
    [
      "env",
      {
        // leave imports as they are
        "modules": false
      }
    ]
  ],
  "plugins": [
    // support dynamic import syntax, but leave it unchanged
    "babel-plugin-syntax-dynamic-import"
  ]
}

My questions are:

1)What is the difference between es2015 preset and env preset?

2)Why do we need modules option to be false?I understood that it instructs Babel to not try and parse the imports.But why exactly do we need that?

3)And how about dynamic imports?Why do we need to use plugin?Is there any relation between modules:false option?

4)What about browser support for the dynamic imports?Can babel transform it to ES5?Can dynamic imports and code splitting work with IE10 or IE11?How can we figure that which browser supports dynamic imports and code splitting?

Upvotes: 3

Views: 2142

Answers (1)

KarlR
KarlR

Reputation: 1615

Ad 1 - babe-preset-es2015

This is deprecated. If you want to stay up to date, use the env preset

Note from authors:

instead of making more yearly presets 😭 , Babel now has a better preset that we recommend you use instead: npm install babel-preset-env --save-dev. preset-env without options will compile ES2015+ down to ES5 just like using all the presets together and thus is more future proof

Ad 2 - Modules is set to false to ensure that import statements are left as is (opposed to transpiling them to require). For example: You can do this to give Webpack the ability to statically analyze our code to produce more efficient bundles.

Ad 3 - It allows parsing of import(). I do not know if there is a relation to modules option.

Ad 4 - 'Note: Dynamic import() is available in Chrome 63 and Safari Technology Preview 24' -> source: Dynamic imports

Upvotes: 1

Related Questions