es6-modules

For a personal project, I'm trying to use ES6 import to write cleaner code. As first test, I'm writing an object that should generate a menu. The whole code is working when I'm directly loading up the class, yet when using the import and export in ES6, it gives an "Uncaught SyntaxError: Unexpected identifier" error on the import line in main.js I've got the following files: assets/js/menu.module.js 'use strict'; export default class Menu { ... } assets/js/main.js import Menu from "./menu.module.js"; window.addEventListener('DOMContentLoaded', () => { const menu = new Menu(); }); index.html

Let's say I have a variable that I want to export. What's the difference between export const a = 1; vs export let a = 1; I understand the difference between const and let , but when you export them, what are the differences? In ES6, import s are live read-only views on exported-values. As a result, when you do import a from "somemodule"; , you cannot assign to a no matter how you declare a in the module. However, since imported variables are live views, they do change according to the "raw" exported variable in exports. Consider the following code (borrowed from the reference article below):

I've been thinking around this question lot of days and i have decided to ask the experts. How browsers will handle the new import/export syntax ? I mean: will the modules be loaded asynchronously ? Referencing only my main or entry file and browsers will lazy load the requiere modules. Maybe am i missing or misunderstanding something about this new architecture ? Thank you very much! Regards. This is standardized now and supported by all major modern browsers. will the modules be loaded asynchronously? Yes, with two options available; details below. Referencing only my main or entry file and

I have two classes in two separate files and one extends from another. The base class contains some import statements using node modules. It is unclear to me why the derived class (which is in a separate file) does not recognize the base class!!!??? Can someone clarify this please? // UtilBase.ts /// <reference path="../typings/node.d.ts" /> /// <reference path="../typings/packages.d.ts" /> import * as path from "path"; // <---- THIS LINE BREAKS THE BUILD!!!! namespace My.utils { export class UtilBase { protected fixPath(value: string): string { return value.replace('/', path.sep); } } } And

I was under the impression that this syntax: import Router from 'react-router'; var {Link} = Router; has the same final result as this: import {Link} from 'react-router'; Can someone explain what the difference is? (I originally thought it was a React Router Bug .) Felix Kling import {Link} from 'react-router'; imports a named export from react-router , i.e. something like export const Link = 42; import Router from 'react-router'; const {Link} = Router; pulls out the property Link from the default export , assuming it is an object, e.g. export default { Link: 42 }; (the default export is

I have some TypeScript files: MyClass.ts class MyClass { constructor() { } } export = MyClass; MyFunc.ts function fn() { return 0; } export = fn; MyConsumer.ts import * as MC from './MyClass'; import * as fn from './MyFunc'; fn(); This gives me errors when trying to use new Module "MyClass" resolves to a non-module entity and cannot be imported using this construct. and when trying to call fn() Cannot invoke an expression whose type lacks a call signature. What gives? Why it doesn't work import * as MC from './MyClass'; This is ES6/ES2015-style import syntax. The exact meaning of this is "Take