Geek Answers Handbook

Import / Export in ES6 Transpilers

This is not a duplicate of the questions below related to specific browser issues. I am awaiting a response whether import / export work on the 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>

The error I get in Chrome:
enter image description here

Tested browser: Google Chrome version 47.0.2526.106

  • Is it possible for the code to work in any browser or not?
  • Let's say we chose one BabelJS ( BabelJS ), and the code was full. Will the import / export file code fragment work on the client side or on the server side (in the node server as a request method)?
+6
source share
2 answers

MDN says

Note. This feature is currently not implemented in any browsers. It is implemented in many transpilers, such as the Traceur, Babel, or Rollup compiler.

For example, after using babel in the 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 for use in NodeJ. But for use in a browser, you need something like require.js or a browser. In this plunker, I used require1k

+4
source

As Manasov Daniel said

MDN says

Note. This feature is currently not implemented in any browsers. It is implemented in many transpilers, such as the Traceur, Babel, or Rollup compiler.

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

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

 $ npm install --save-dev babel-cli

Every time you make changes to your ES, you must recompile JS.

0
source

More articles:


All Articles