webpack js文件範圍 - 導入功能文件

我正在學習第一次使用webpack。我對gulp從來沒有問題的東西非常堅持，這就是它範圍不同的文件的方式。webpack js文件範圍 - 導入功能文件

我有一個包含多個獨立函數（helpers.js）的文件。

function a() { 
} 
function b() { 
} 
function c() { 
}

根據我的reading here是否需要分別導入每個功能？我如何導入整個文件？

在鏈接的例子：

a.js：

export var a = 4;

b.js

import { a } from "./b.js"; 
var b = a+1; 
console.debug(b);

來源

2017-08-09 TheRealPapa

從「./b」;'（不以'.js'結尾）嘗試'import {a} – Vayne

對不起，Alan的問題是如何導入帶有函數的外部文件，並使每個函數都可用全球範圍。與全局變量相同 – TheRealPapa

大聲笑。對不起，我沒有看到你的問題:)。你可以參考這個問題：[ES6 + JavaScript模塊導出選項]（https://stackoverflow.com/questions/25494365/es6-javascript-module-export-options）我認爲這是很好的開始。 – Vayne

我懷疑你曾經使用過一些串聯插件杯和你的範圍是「共享」。使用ES6模塊時，您必須準確定義要導出和導入的功能，因爲每個文件的範圍都是單獨的。

所以在你的例子，我們可以這樣來做：

創建helpers.js默認的導出和定義哪些數據導出。

helpers.js

function a(){} 
function b(){} 
function c(){} 

export default {a,b,c}

和導入數據是這樣的：

import myHelpers from 'helpers'

然後使用幫手，你將需要調用myHelpers.a（）

另一種方法是創建「named」導出

個

helpers.js：

export function a(){} 
export function b(){} 
export function c(){}

要導入所有數據使用：

import * as myHelpers from 'helpers'

然後類似於前面的例子中，調用 - > myHelpers.a（）

但輸入「myHelpers 「並不總是方便，所以在這裏我們可以使用命名導出額外的好處 - 您可以通過名稱導入它，所以我們可以這樣做：

import {a,b,c} from 'helpers'

然後您可以撥打（）

您必須輸入要導入的所有名稱。對此沒有「捷徑」。

爲什麼這樣？ProvidePlugin

好，但什麼 - 在你輸入什麼給你的代碼，可選的「樹搖晃」導入模塊

的WebPack之間

沒有衝突

更好的控制如果你經常使用這些幫手？你需要將它們導入到任何地方嗎？技術上 - 是的。但是Webpack可以爲我們自動化，看看Webpack - ProvidePlugin它會自動加載模塊，而不必將它們導入到任何地方。

對於的WebPack 3，如果你與第一種解決方案，將是這樣的：
```
new webpack.ProvidePlugin({ 
    helpers:['path/to/module/helpers', 'default'], 
}), 
```
這將提供像一個「全球性」的助手，你將能夠使用helpers.a（）

來源

2017-08-09 03:28:15 mgibala

webpack js文件範圍 - 導入功能文件

回答

相關問題