如何在ecmascript 6中導入json文件？

如何訪問Ecmascript 6中的json文件？以下不工作：如何在ecmascript 6中導入json文件？

import config from '../config.json'

，如果我嘗試導入的JavaScript文件也能正常工作。

來源

2016-01-22 Nikita Jajodia

這與ES6無關，但與您正在使用的模塊加載器無關。語法本身很好。 –

最簡單的方法是使用'webpack'和'json-loader'。 –

一個簡單的解決方案，爲我工作;不是100％的純，我不得不使用.js文件：

config.js

export default 
{ 
    // my json here... 
}

然後...

import config from '../config.js'

來源

2016-10-04 14:46:31 Gilbert

的含義，這實際上並沒有回答這個問題。例如，您不能簡單地將package.json轉換爲package.js。有時候你想真正導入JSON而不是JS。 – curiousdannii

不幸的是，ES6/ES2015不支持通過模塊導入語法加載JSON。

有很多方法可以做到這一點。根據您的需要，您可以查看如何在JavaScript中讀取文件（如果您在瀏覽器中運行，則可以選擇window.FileReader），或使用other questions（假設您使用的是NodeJS）中描述的其他裝載器。

IMO最簡單的方法可能是將JSON作爲JS對象放入ES6模塊並將其導出。這樣你就可以將它導入你需要的地方。

來源

2016-01-22 12:10:10 Simone

有沒有必要把它放在一個字符串。畢竟，它被稱爲JSON，而不是JSSN。 – zeroflagL

另外，torazaburo在以前刪除的答案中解釋：*沒有ES6「模塊系統」;有一個API是由一個特定的加載器實現的。任何加載器都可以做任何事情，包括支持導入JSON文件。例如，加載器可能會選擇從'./directory'支持import foo作爲導入目錄/ index.js * – CodingIntrigue

我用巴貝爾+ browserify和我有目錄中的JSON文件./i18n/locale-en.json帶有翻譯命名空間（與ngTranslate一起使用）。

而不必導出從JSON文件任何東西（這順便說一句是不可能的），我可以做它的內容與此語法的默認導入：

import translationsJSON from './i18n/locale-en';

來源

2017-01-31 00:07:45

有點晚了，但我只是偶然發現嘗試爲我的Web應用程序提供分析時遇到同樣的問題，其中包括基於package.json版本發送應用程序版本。

配置如下：陣營+終極版，3.5.6的WebPack

JSON的裝載機沒有做太多，因爲的WebPack 2+，所以用它的一些擺弄後，我結束了刪除。

實際爲我工作的解決方案只是使用fetch。雖然這很可能會強制執行一些代碼更改以適應異步方法，但它工作得很好，尤其是考慮到fetch會即時提供json解碼。

所以在這裏，它是：

fetch('../../package.json') 
    .then(resp => resp.json()) 
    .then((packageJson) => { 
    console.log(packageJson.version); 
    });

千萬記住，既然我們正在談論的package.json這裏具體，該文件將不會通常是在你的生產版本捆綁（甚至開發了這一點），所以你必須使用CopyWebpackPlugin才能在使用fetch時訪問它。

來源

2017-09-26 13:11:48

如何在ecmascript 6中導入json文件？

回答

相關問題