Support dynamic imports

[kristoforsalmin]

From #4:

Do you think we should use babel-plugin-syntax-dynamic-import by default? It's in stage 3 now, so must be pretty safe to use it and webpack supports it out of box. We'll probably need to be extra careful about the way we set it up (permanent chunk naming, etc.). (@racse1)

I've been using dynamic imports on two projects already and as you mentioned it's pretty safe to use them. At least I haven't run into anything. I don't see introduction of dynamic imports as a problem but one should consider when to use this feature and remember chunk naming along which chunkhashing and so on. However, as I see we don't need babel-plugin-dynamic-import or do we? I thought import() was supported out of the box now. Lets add dynamic imports and make sure if syntax is supported. Eslint also needs a little config update to support this. (@mi2oon)

[mi2oon]

@racse1 Turns out that I had babel-preset-stage-2 included and buried deep in my project without really realizing it. So, the conclusion is that a preset is needed.

It seems like the old stage 2 preset includes dynamic imports where the new stage 2 doesn't as it's recently been moved to stage 3. So, the new stage 2 includes stage 3 features along with a few goodies from stage 2. Anyway, as we only need dynamic import for now I've gone ahead and experimented with @babel/preset-stage-3. It all works fine but I get a linting issue.

error Parsing error: 'import' and 'export' may only appear at the top level

Seems like the eslint doesn't support dynamic and they don't have any intention to support experimental features. https://github.com/eslint/eslint/issues/7764#issuecomment-328738490

So, lets have a look at a way to suppress this 'error'. If you have any ideas let me know :)

ps: I've tried adding babel-eslint as a parser and it works but there must be a way without introducing another dependency. 😉