intergration with babel 7 and preset-env

[Dan Rossi]

I only just upgraded my versions and had to figure out how to integrate the preset-env. I've set a target but it seems to still be polyfilling classes. Is this correct ?

babel({
                            externalHelpers: false,
                            exclude: './node_modules/**',
                            "presets": [
                                [
                                  "@babel/preset-env",
                                  {
                                    modules: false,
                                    "targets": {
                                        "browsers": ["last 2 versions"]
                                    }
                                  }
                                ]
                              ]
           
                        }),

[Lee Goddard]

Is anyone looking at this?

[Nicolò Ribaudo]

You can pass the debug: true option to preset-env and it will explain why it is transpiling things

[Michael]

@nicolo-ribaudo Tried the option. Seems, like the option ie 6 is caught from .babelrc, but output is also full of arrow and async functions etc.

[Alex MacArthur]

I'm experiencing this as well. When I output the debug information, it says it's using a completely different list of browser targets than what I specify.

[Mateusz Burzyński]

@alexmacarthur could you prepare a repro case?

[Lynch Ye]

@Andarist repro case https://github.com/lovemegowin/luna/tree/master/packages/ekko-loading

[Mateusz Burzyński]

@lovemegowin Could you describe the issue in more detail? What is the actual result? What is the expected result?

[Lynch Ye]

@Andarist Thanks for you reply . Here is my rollup config

// rollup.config.js
import babel from 'rollup-plugin-babel';
import nodeResolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript'
import json from 'rollup-plugin-json';
import commonjs from 'rollup-plugin-commonjs';

const outputTypes = [
  { file: './es/index.js', format: 'es' },
  { file: './lib/index.js', format: 'cjs' },
];

export default outputTypes.map(output => (
  {
    input: 'src/index.ts',
    output,
    plugins:[
      json(),
      nodeResolve({
        browser: true
      }),
      commonjs({
        namedExports: { 'react': ['createElement', 'Component' ] }
      }),
      typescript(),
      babel({
        babelrc: false,
        presets: [
          [
            "@babel/preset-env",
            {
              "targets": {
                "browsers":  [
                  "last 1 version",
                  "> 1%",
                  "IE 6"
                ]
              },
              "loose": true,
              "modules": false,
              "useBuiltIns": false,
              debug: true
            }
          ],
          "@babel/preset-react",
          "@babel/preset-typescript"
        ]
      }),
    ],
    external: ['antd','react','react-dom'],
  }
))

Arrow function cannot be transform when i set target for IE6 , in spite of debug log is use transform plugin

[Mateusz Burzyński]

That's because you don't configure Babel to transpile .ts filed. You need to make use of extensions option passed to rollup-plugin-babel.

[Lynch Ye]

@Andarist Thank you ! This is the right way to resolve my confuse .

[Herman (Boomer) Rogers]

I had the same issue and was able to get it working with a simple string, not sure why.

      presets: [
        [
          "@babel/preset-env",
          {
            targets: "defaults, ie >= 11",
            debug: true,
          }
        ],
      ],

[Sissi]

i got it working using this guide: https://blog.az.sg/posts/svelte-and-ie11/