0

I am trying to use ES6 imorts with babel and Node.js

import "./utils.js";

log("something"); //throw an error : log is not defined

My utils.js look like this :

function log(... params){
    console.log(... params);
}

log("module utils executed");
//Is executed and display "module utils executed" in the console.

I have also tryed to use export function log(... params) and export default log(... params) but it doesn't works.

So I don't understand how this is suppose to works...

EDIT:

I know that an other way to import is to do import utils from "./utils.js"

But it's not what I want. I want to be able to use log() without prefixing it with the module variable name. Like in this blog post

Emrys Myrooin
  • 2,179
  • 14
  • 39

2 Answers2

6

there Different ES6 import and Node.js require Question Describe The Difference

In case you will use Node.js require:

your utils.js File will be

function log(params) {
    console.log(params);
}

module.exports = {
   log
};

The other File will import your Utils Module will be

var utils = require('./utils');
utils.log("test");

In case you will use ES6 Modules:

your utils.js File will be

var log = function (params) {
    console.log(params);
}

var utils = {
    log: log
}

export default utils;

The other File will import your Utils Module will be

import utils from 'utils';

utils.log("test");

UPDATE

According to your Comment, Yes you can do this But using ES6 Module

your utils.js File will be

function log(params) {
    console.log(params);
}

function anotherLog(params) {
    console.log(params);
}

export { log, anotherLog }

The other File will import your Utils Module will be

import { log } from 'utils';

log("test");
Community
  • 1
  • 1
ahmed hamdy
  • 5,096
  • 1
  • 47
  • 58
  • Yes I know this but I don't want to use this import type. I want to import functions directly in my namespace. I want to be able to call `log` without prefixing it with module variable. – Emrys Myrooin Jan 22 '16 at 21:20
  • Yes it works for `log` but my `utils.js` module doesn't conatins only `log()`. It's a util module that will contains functions that I want to use in all my modules. – Emrys Myrooin Jan 22 '16 at 22:22
  • 1
    you can export many functions inside of `utils`, and then selectively import with `import { log } from 'utils';` – Dan O Jan 22 '16 at 22:24
  • @EmrysMyrooin see my update again, you will export all function into your Util Module using `export` Keyword and you can import only method what you want to use using `import` Keyword – ahmed hamdy Jan 22 '16 at 22:28
  • But I will have to put the list of functions I need. There is no way to use the syntax I have tryed ? I have seen this syntax in other exemples. – Emrys Myrooin Jan 22 '16 at 22:44
4

No, there is no way to import all exported members of a module into the current namespace. Importing a module for side effects (i.e. import 'utils') does nothing with the members of utils.

The closest you can get is something like this:

utils.js

export function log(...params) { ... }
export function foo(a) { ... }

main.js

import * as u from './utils';
u.log(1, 2, 3);
u.foo(4);

or

import { log, foo } from './utils';
log(1, 2, 3);
foo(4);

One of the design goals of the ES6 module spec is a static module structure, which allows resolution of imports at compile time (before executing anything). Allowing blanket imports would make static analysis more difficult.


EDIT (do not do this!)

As @Bergi pointed out in the comments, you can add functions to the global namespace as follows:

utils.js

function log(...params) { ... }
global.log = log;

main.js

import './utils';  // import for side effects, add properties to the global object
log(1, 2, 3);      // the global object is in the scope chain, so this is resolved

However this is a bad idea. Global variables are slow to resolve and in general break the modularity you try to achieve by using modules in the first place.

Igor Raush
  • 15,080
  • 1
  • 34
  • 55
  • 1
    Well we could put the functions in global scope and then just import that module, but that's really what we don't want to do. – Bergi Jan 22 '16 at 23:12
  • @Bergi, you mean with `global.log = ...`? Yes, that would be a pretty awful thing to do. – Igor Raush Jan 22 '16 at 23:21
  • Yes, that's what I meant, it's the only way the OP's code (in `main.js`) would work as-is. But +1 for your answer to how it is supposed to be. – Bergi Jan 22 '16 at 23:27