ES6進口「模塊」不給的存取權限「模塊」

Question

我試圖使用ES6 imorts與巴貝爾和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

不，沒有辦法將模塊的所有導出成員導入當前命名空間。導入一個副作用模塊（即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 

然而這是一個壞主意。全局變量的解析速度很慢，並且通常會打破您首先使用模塊試圖實現的模塊化。

Answer 2

有不同ES6 import和Node.js的requireQuestion 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"); 

UPDATE

據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");