usage of babel/polyfills

[br4nnigan]

so if I use browserify like this:

browserify src/test2.js -o dist/js/test.js -t [ babelify --presets [ @babel/preset-env ] ]

it is completely ignored that I want the polyfill to be used.

here's my .babelrc

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "loose": true,
      "modules": false,
      "targets": {
        "ie": "8"
      }
    }]
  ]
}

If I ommit the --presets from cli then @babel/preset-env will not be pulled from the .babelrc which I find strange, so maybe babelify ignores that file completely? But how to pass options via the cli then?

now if I just use babel directly like this:

node_modules\.bin\babel src/test2.js --out-file dist/js/test.js

the output file will actually kind of try to use the polyfill but use import statements like this, which makes it hardly usable:

import "core-js/modules/es6.string.includes";

I just need both, conversion if es6 imports AND injection of needed polyfills

[br4nnigan]

nasty workaround: I run both, first the babel command, then the browserify

node_modules\\.bin\\babel src/js/script.js --out-file src/js/script_babel.js & browserify src/js/script_babel.js -o dist/js/script.js -t [ babelify --presets [ @babel/preset-env ] ] -p [ tinyify ] & del src\\js\\script_babel.js

[goto-bus-stop]

if you set "modules": "commonjs", babel should transform the import statements to commonjs require.

[br4nnigan]

Well the babel command does indeed do that, but it doesn't solve the problem. I'd still have to browserify the bundle afterwards. And if I'm not completely mistaken, babelify should do exactly that: include babel in the browserify process.

And when I run browserify anyway I wouldn't even need the commonjs setting in babelrc. It works with the es6 modules too.

As I said, the browserify command with babelify transform seems to ignore .babelrc because the polyfills needed for my specified target are not added. This would also explain why I cannot ommit the "preset" parameter in the command which could/should be pulled from the .babelrc

Thanks for the input though.

[helzich]

@br4nnigan, I had a similar problem.

The babel transform via babelify worked, i.e. arrow functions and templates were replaced, but promises were still in the output. (I am not using a .babelrc file.)

Eventually, this SO answer solved my problem. I had to add the transform-es2015-classes plugin on top of the presets. My final browserify line (in package.json) looks like this: "browserify": "browserify src/js/main.js -t [ babelify --presets [ @babel/preset-env ] --plugins [ transform-es2015-classes ] ] -o dist/js/main.min.js"

I also had to install core-js and add a require to my main.js, in my case require('core-js/modules/es.promise');