ES6導入“模塊”不授予“模塊”功能

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()而不用模塊變量名作為前綴。 喜歡這篇博客文章

Answer 1

有不同的ES6 import和Node.js require 問題描述差異

萬一您將使用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");

更新

根據您的評論 ，可以，但是可以使用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

但這是一個壞主意 。 全局變量的解析速度很慢，通常會破壞您首先使用模塊來實現的模塊化。