JS tooling: upgrade to babel 7

[davkal]

• upgrade from babel 6 to 7
• use babel/preset-env and useBuiltIns to govern what is included from babel polyfill
• replace ts-loader from hot-reload webpack config, TS compilation now being done by babel plugin

Seems to work ok for yarn build and yarn dev. But with yarn start I get errors when accessing a dashboard: TypeError: Cannot read property 'meta' of undefined which seems to come from dashnav.ts:

  /** @ngInject */
  constructor(private $scope, private dashboardSrv, private $location, public playlistSrv) {
    appEvents.on('save-dashboard', this.saveDashboard.bind(this), $scope);

    if (this.dashboard.meta.isSnapshot) {

Somehow the instantiation is not working (dashboard is missing, which is supplied via an angular directive).

[torkelo]

if dashboard is null there is could be that somehow pre assign bindings is not enabled .

https://github.com/grafana/grafana/blob/master/public/app/app.ts#L70

not sure why hot reload should cause issues with this binding flag

[davkal]

The bundle implications are negligible:

Before:

     vendor.d9d56360a977b6c2316b.js    3.39 MiB       0  [emitted]  [big]  vendor

After:

     vendor.6af89965262332b9c799.js    3.38 MiB       0  [emitted]  [big]  vendor

[dprokop]

@davkal what's the reasoning behind this change?

[davkal]

I wanted the config to be the same as in react-hot-reloader README in case I overlooked something. jsx? won't be included in this PR. Thanks for highlighting it out though.

[torkelo]

This was tricky.

Somehow babel is doing stuff that is not compatible or the same as typescript output. Babel is setting class properties to undefined. which breaks angularjs bindings that pre assigns properties before calling constructor.

Possibly related issues
babel/babel#7644
babel/babel#7074
babel/babel#5854
babel/babel#8682

Not sure how to fix this. Tried some suggestions in those issues without success.

[torkelo]

Pushed a fix using fork of the problematic babel plugin,
fd71abc

Also investigated the why the type warnings show up (Bug in webpack where there currently is no workaround other than filtering them out), they are filtered out in normal webpack watch mode using stats warningFilter, but this seems to be ignored by webpack dev server:
webpack/webpack-dev-server#1557

[davkal]

LGTM now.