I try to repeat example from Mozilla Hacks (Export lists subtitle):
//export.js
export {detectCats, Kittydar};
function detectCats() {}
class Kittydar {}
//import.js
import {detectCats, Kittydar} from "./export.js";
console.log(detectCats); // function detectCats() {}
console.log(Kittydar); // undefined
Oops: Kittydar is undefined (btw., the problem is the same with simple Object).
But if I put export after Kittydar declaration it's ok:
//export.js
class Kittydar {}
export {Kittydar};
//import.js
import {Kittydar} from "./export.js";
console.log(Kittydar); // function Kittydar() {_classCallCheck(this, Kittydar);}
Is this a typo in the article?
I transpile this with babel and bundle with browserify. Then I include output bundle in a usual .html file (with <script> tag).
The standard is hard to follow on this, but the article is correct. This code works in es6draft and in the SpiderMonkey shell: both the function and the class are initialized by the time those console.log calls run.
Here's how it's supposed to work, in minute detail:
The JS engine parses import.js. It sees the import declaration, so then it loads export.js and parses it as well.
Before actually running any of the code, the system creates both module scopes and populates them with all the top-level bindings that are declared in each module. (The spec calls this ModuleDeclarationInstantiation.) A Kittydar binding is created in export.js, but it's uninitialized for now.
In import.js, a Kittydar import binding is created. It's an alias for the Kittydar binding in export.js.
export.js runs. The class is created. Kittydar is initialized.
import.js runs. Both console.log() calls work fine.
Babel's implementation of ES6 modules is nonstandard.
I think it's deliberate. Babel aims to compile ES6 modules into ES5 code that works with an existing module system of your choice: you can have it spit out AMD modules, UMD, CommonJS, etc. So if you ask for AMD output, your code might be ES6 modules, but the ES5 output is an AMD module and it's going to behave like an AMD module.
Babel could probably be more standard-compliant while still integrating nicely with the various module systems, but there are tradeoffs.
Related
I do my development using modern JS (ES6) which means modules.
Although Three.js is available as an ES6 module. The line library - LineSegmentsGeometry, LineGeometry, LineSegments2, etc. - is not.
What are my options here?
You have a couple options.
First and foremost, edit the code.
You're welcome to modify the code, and so you could manually turn it into an ES6 module. You would want to remove any references of THREE, and export anything that was normally attached to that object. You'll also need to import any required core THREE.js components, like Mesh, Vector3, etc.
The way I prefer to do this is to copy the file I'm updating locally, and change references to it. For example:
// local_three_modules/LineSegments2.js
import { Mesh, Vector3, etc. } from "three"
let LineSegments2 = function ( geometry, material ) {
// ...
}
export default LineSegments2
// app.js
import { Mesh, Vector3, etc. } from "three"
import LineSegments2 from "./local_three_overrides/LineSegments2.js"
// and so on...
Your other option is to use a bundler with an export loader.
Webpack (and other bundlers, I'm just more familiar with Webpack) provides a exports-loader which can be used against specific files that don't export anything. For example, you can tell the exports-loader to export THREE from LineSegments2.js. To get webpack involved in this process, you need to tell it to use the loader on the file. You can do this through the webpack configuration, or inline in the code like this:
import THREE from "exports-loader?THREE!./node_modules/three/examples/js/lines/LineSegments2.js"
I am trying to show a diff for two JSON objects in Angular 4 view, I am using this library (angular-object-diff) originally built for AngularJS.
Demo of that library: Link
I tried to import this JS library the following way:
JS file I am trying to import: angular-object-diff.js, doesnt have a exported variable
In my typings.d.ts ( I added the following):
declare var ObjectDiff: any;
In my angular-cli.json, I added
"scripts": [
"../node_modules/angular-object-diff/dist/angular-object-diff.js"
],
In my component file:
const json1 = {
name: 'John'
};
const json2 = {
name: 'Johnny'
};
const diff = ObjectDiff.diffOwnProperties(json1, json2);
this.jsonViewData = ObjectDiff.toJsonDiffView(diff);
In my view:
<pre ng-bind-html="jsonViewData"></pre>
<pre> {{jsonViewData}}</pre>
Nothing seems to be working, I get the error that "ObjectDiff" is not defined in the console"
Can someone please let me know if I am doing in thing wrong ?
Suggestions for displaying the JSON diff are also welcomed :)
** Thank you
The library doesn't export anything. It uses IIFE to not pollute global scope with local variables. It's impossible to reach local variables from the outside, this makes Module pattern so effective (and annoying).
The library uses AngularJS angular global and expects that it will exist. This creates a problem, because Angular 4 application should mock angular global in this case. Moreover, the code itself relies on AngularJS-specific units ($sce service).
The library should be forked and modified to suit the expectations. The mentions of angular should be removed. Considering that script will be executed in module scope, IIFE should be removed and appropriate exports should be added.
Previously I've been using following in my JS entry points:
require('coffeescript/register');
module.exports = require('./entry.coffee');
What is the corresponding ES6 syntax of this?
Following does not seem to register anyhing.
import 'coffeescript/register';
export * from 'entry.coffee';
Error is:
Cannot find module 'entry.coffee'
Tested on Coffeescript 2.0 beta2.
Update:
Changing path to relative:
import 'coffeescript/register';
export * from './entry.coffee';
finds the entry.coffee, but treats it as JS. Hence, Coffeescript is not handled by transpiler.
You don't need to use coffeescript/register if you're transpiling the CoffeeScript as part of your bundling process (which you need to, if you're using Rollup) — that's just a way to enable Node to run CoffeeScript files without having to first convert them.
Instead, try adding rollup-plugin-coffee-script to your rollup.config.js file.
I am trying to test lodash, and apparently the following line won't work in the REPL:
import curry from 'lodash/curry';
See, e.g., babel-node es6 "Modules aren't supported in the REPL"
Why does babel-node not support module loading in the REPL?
Is there a way that I can pre-load a module like lodash into babel-node? (e.g. via a command line option or a configuration file)
If not, is there another way of evaluating ES6 with lodash preloaded?
So far, I've tried the online REPL at https://babeljs.io/repl/, and evaluation in the Console in Firefox. None worked.
import surely won't work, because the package should be installed first and bundled in order to be imported, which isn't the duty of Babel REPL.
Lodash is already loaded and used in Babel REPL, it can be used in REPL as _ global:
const { curry } = _;
If the question isn't limited to Lodash, the quickest way to get third-party library in REPL is to load the script manually. And since Babel website has jQuery loaded (as almost any website), the shortest way to do this is jQuery.getScript, in console:
$.getScript('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js');
After that Lodash _ global becomes available in REPL.
The whole code can be wrapped with callback to skip console part:
$.getScript('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js', () => {
console.log(_.VERSION);
});
babel-node REPL doesn't support imports, as the links in the original post say. Instead, require should be used, like anywhere else in Node.
var { curry } = require('lodash')
This requires to have lodash installed in node_modules that exists in current working directory.
Some old Javascript libraries directly attach an object to the global scope (no AMD, no UMD, no commonJS).
Is there a nice way to "include" a global module in ECMAScript 6 code?
I'm just aware of the following line:
import './globallib.js';
And then access the global variable directly.
Example: to load QUnit test function:
import 'qunit';
test('my test', function () {
ok(true, 'QUnit loaded');
});
Is this the right way?
PS. I encountered this problem while working with QUnit 1.8 in a project that compiles to ES 5 using Babel and Browserify. In QUnit 2 they're gonna avoid globals. But I have this question in general.
As far the QUnit exports its methods into window (according source code), you right, import expression is enough.
But anyway, you can't use raw imports in browsers, so you have to use some preprocessing. Webpack and browserify will work for you, but it would not be so for another build systems.