Question

我正在尝试使用带有babel和Node.js的ES6 imorts

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) { ... }

<强> main.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在评论中指出的那样，您可以按如下方式向全局命名空间添加函数：

<强> 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

然而这是个坏主意。全局变量解决起来很慢，并且通常会破坏您尝试通过首先使用模块实现的模块性。

ES6导入“模块”不提供对“模块”功能的访问

2 个答案: