remove arrow function (not supported in IE)

[alex-fournier]

No description provided.

[xlozinguez]

Let's merge this pleaseeeeeee!

[bkbartonDesign]

Please merge this fix. I have to go into all environments and patch this. It's a quick win.

[florian-kittel]

Why is it sill open? Please merge it and release a patch version to solve the issue #95

[vagdwd]

Please merge this. The build passed but the CI status is still pending. https://travis-ci.org/github/hughsk/flat/builds/618196478

[cr0cK]

@alex-fournier Can you merge it?

[alex-fournier]

@alex-fournier Can you merge it?

I can't, I'm not in the contributor list.

[rpastorelle]

@timoxley ^^

[cr0cK]

For the ones who are waiting this PR that obviously will be never merged and because more and more libraries are like this one, I personally add a more step in my build to transpile (with Babel) the whole bundle (made by Webpack) to removing arrow functions, litteral strings, etc.

It makes my app compliant with IE11.

Hope it will help.

[thefat32]

@cr0cK could you share the config you used to transpile the whole bundle?

[cr0cK]

Sure, I have created a babel.config.json file (not .babelrc, see https://babeljs.io/docs/en/configuration for more information) at the root of my project:

{
  "comments": false,
  "plugins": [
    "@babel/transform-arrow-functions",
    "@babel/plugin-transform-template-literals",
    "@babel/plugin-transform-literals"
  ],
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "ie": "11"
        },
        "useBuiltIns": false
      }
    ]
  ]
}

Then I have created a script that I call after my Webpack build in order to generate the final bundle:

import * as babel from '@babel/core'
import { distDir, ROOT_DIR } from '@server/paths'
import { getAssetsPaths } from '@server/routers/indexRouter/helpers'
import * as fse from 'fs-extra'
import * as path from 'path'

/**
 * This script gets the filename of the bundle client and transpiles it again
 * to ES5.
 *
 * This ensures that the bundle will be compatible with IE11 even if some
 * third-party libraries are not transpiled in ES5.
 *
 * Usage:
 * npm run transpile:bundle-client
 */

const log = console

getAssetsPaths()
  .then(async ([clientBundlePath]) => {
    const clientBundleFullPath = path.join(distDir, clientBundlePath)
    const babelConfigPath = path.join(ROOT_DIR, 'babel.config.json')

    log.info(`\n✓ Transpiling ${clientBundleFullPath}, please wait...`)

    const babelOptions: babel.TransformOptions = {
      // use babel.config.json
      configFile: babelConfigPath,
      // don't use .babelrc
      babelrc: false
    }

    return {
      clientBundleFullPath,
      babelFileResult: await babel.transformFileAsync(
        clientBundleFullPath,
        babelOptions
      )
    }
  })
  .then(({ clientBundleFullPath, babelFileResult }) => {
    if (!babelFileResult) {
      throw new Error('No result after transformation!')
    }

    if (!babelFileResult.code) {
      throw new Error('No code after transformation!')
    }

    log.info('\n✓ Transpiling done!')

    // write the new bundle
    log.info(`\n✓ Overwrite the bundle ${clientBundleFullPath}`)

    return fse.writeFile(clientBundleFullPath, babelFileResult.code)
  })
  .then(() => {
    log.info('\n✓ All good!')
  })
  .catch(err => {
    log.info(`\n✘ An error has occurred: ${err.message}`)
    process.exit(1)
  })

[timoxley]

Thanks, merged similar PR: #102