Ad
Import / Export In ES6 Transpilers
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 theimport
/export
file code snippet will work in the Client side or Server side (In node Server as require method)?
Ad
Answer
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"mplemented 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
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad