import / export in ES6 Transpilers

Question

This is not a duplicate of below questions which is dealing with browser specific questions. I'm expecting an answer whether import / export will work in Client side or not.

//lib.js

export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}
  
//main.js
  
"use strict";

import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Import Check</title>
</head>
<body>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

Error that I'm getting in Chrome:

Tested Browser: Google Chrome Version 47.0.2526.106

Is that possible to make the code working in any browser or not ?
Lets say, we have chosen one transpiler (BabelJS) and code got transpiled. Will the import / export file code snippet will work in the Client side or Server side (In node Server as require method)?

Why is your title "import/export in ES6 transpilers" when your question is about chrome? — , Jan 03 '16 at 09:32
@torazaburo, i have updated the question what actually i expect ! — Venkat.R, Jan 03 '16 at 14:41
Earlier marked original and current questions are same. its need to reopened ! — Venkat.R, Jan 03 '16 at 14:52

Manasov Daniel · Accepted Answer · 2016-01-03T19:30:32.523

4

MDN says

Note: This feature is not implemented in any browsers natively at this time. It is implemented in many transpilers, such as the Traceur Compiler, Babel or Rollup.

For example after using babel on your code snippet you will get something like this:

//lib.js

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.square = square;
exports.diag = diag;
var sqrt = Math.sqrt;
exports.sqrt = sqrt;

function square(x) {
    return x * x;
}

function diag(x, y) {
    return sqrt(square(x) + square(y));
}
//------ main.js ------
'use strict';

var _lib = require('lib');

console.log((0, _lib.square)(11)); // 121
console.log((0, _lib.diag)(4, 3)); // 5

This code is enough to use in NodeJs. But to use in browser you need something like require.js or browserify. In this plunker I used require1k

edited Jan 03 '16 at 19:30

answered Jan 03 '16 at 00:56

Manasov Daniel

1,348
9
17

you meant to say its not possible to test without transpilers like babel, traceur, typescript even we add use strict – Venkat.R Jan 03 '16 at 00:58
`"use strict";` Defines that JavaScript code should be executed in "strict mode". – Manasov Daniel Jan 03 '16 at 01:36
i expect the answer as working code snippet to get the import feature to work not only reference! – Venkat.R Jan 03 '16 at 03:59
@Venkatraman I used babel and got code that I added to answer. – Manasov Daniel Jan 03 '16 at 10:22
@Venkatraman also look at this questions [first](http://stackoverflow.com/questions/1335851/what-does-use-strict-do-in-javascript-and-what-is-the-reasoning-behind-it?rq=1) [second](http://stackoverflow.com/questions/34551070/use-babel-with-javascript) – Manasov Daniel Jan 03 '16 at 10:31
it says Uncaught ReferenceError: exports is not defined – Venkat.R Jan 03 '16 at 14:54
explained how to use in browser. Added plunker – Manasov Daniel Jan 03 '16 at 19:31
Nice. will proceed further once its get reopened. – Venkat.R Jan 03 '16 at 19:35

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

Like Manasov Daniel said

MDN says

Note: This feature is not implemented in any browsers natively at this time. It is implemented in many transpilers, such as the Traceur Compiler, Babel or Rollup.

With newer versions of ECMAScript (before implementation in browsers), you usually have to transpile (compile) the ECMAScript code into JavaScript. The tool of my choice is Babel, although there are many others out there.

You can install Babel CLI by going to your terminal and entering:

$ npm install --save-dev babel-cli

Everytime you make a change to your ES, you should recompile to JS.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 03 '16 at 01:04

Viraj Shah

754
5
19

what babelJS exactly does if we give import statement one line. will that convert it to require ? – Venkat.R Jan 03 '16 at 01:10
Yes it does. ES6 transiplers will always convert ES6 to its latest version of JavaScript counterparts – Viraj Shah Jan 03 '16 at 01:31
what are those, share it for better understanding – Venkat.R Jan 03 '16 at 07:29

import / export in ES6 Transpilers

2 Answers2