ES6 import "module" 不能访问 "module" 的功能

Question

我正在尝试将 ES6 imorts 与 babel 和 Node.js 一起使用

import "./utils.js";

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

我的utils.js 看起来像这样：

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

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

我也尝试过使用export function log(... params) 和export default log(... params)，但它不起作用。

所以我不明白这是如何工作的......

编辑：

我知道另一种导入方式是import utils from "./utils.js"

但这不是我想要的。我希望能够使用 log() 而不用模块变量名作为前缀。喜欢this blog post

Answer 1

有不同的 ES6 import 和 Node.js require Question Describe The Difference

万一你会使用 Node.js require:

您的utils.js 文件将是

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

module.exports = {
   log
};

另一个文件将导入您的 Utils 模块将是

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

如果你将使用 ES6 模块：

您的utils.js 文件将是

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

var utils = {
    log: log
}

export default utils;

另一个文件将导入您的 Utils 模块将是

import utils from 'utils';

utils.log("test");

更新

根据your Comment，是的，你可以这样做但是使用 ES6 模块

您的utils.js 文件将是

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

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

export { log, anotherLog }

另一个文件将导入您的 Utils 模块将是

import { log } from 'utils';

log("test");

Answer 2

不，没有办法将模块的所有导出成员导入当前命名空间。导入用于副作用的模块（即import 'utils'）对utils 的成员没有任何作用。

你能得到的最接近的是这样的：

utils.js

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

ma​​in.js

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

或

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

ES6 模块规范的设计目标之一是静态模块结构，它允许在编译时解析导入（在执行任何操作之前）。允许一揽子导入会使静态分析更加困难。

---

编辑（不要这样做！）

正如@Bergi 在 cmets 中指出的那样，您可以将函数添加到全局命名空间，如下所示：

utils.js

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

ma​​in.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

但是这是个坏主意。全局变量的解析速度很慢，并且通常会破坏您尝试通过首先使用模块来实现的模块化。