Comment importer un fichier json en ecmascript 6?
Comment puis-je accéder à un fichier json en Ecmascript 6 ?
Le suivant ne fonctionne pas:
import config from '../config.json'
Cela fonctionne bien si j'essaie d'importer un fichier JavaScript.
- Cela n'a rien à voir avec ES6, mais avec le chargeur de module que vous utilisez. La syntaxe elle-même est très bien.
- La façon la plus propre de le faire est d'utiliser
webpack
etjson-loader
avec elle. - ES6 support de JSON l'importation avec la syntaxe suivante: import * que les données de". /exemple.json";
Vous devez vous connecter pour publier un commentaire.
Une solution simple:
config.js
alors...
ne permet pas l'importation de l'existant .des fichiers json, mais fait un travail.
"postbuild": "node myscript.js"
pas dans mon colis.fichier json qui utilise remplacer-dans-fichier pour le faire pour moi. myscript.js const replace = require('replace-in-file'); const options = { files: '_demo/typedocs/navexReact.td.js', from: /{/, to: 'export default {', }; const convertJsonOutputToJsModule = async () => { try { const changes = await replace(options) console.log('Converted json to module in files:', changes.join(', ')); } catch (error) { console.error('Error occurred:', error); } } convertJsonOutputToJsModule()
Dans l'ES6/ES2015, vous pouvez importer des json fichier dans votre code.
Références:
https://hackernoon.com/import-json-into-typescript-8d465beded79
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
Loading failed for the module with source "example.json"
; sur Chrome j'ai "Echec du chargement du module de script: Le serveur a répondu avec un non-JavaScript type MIME "application/json". Stricte MIME type de vérification est exécutée pour le module de scripts par spécification HTML."tsc
mais ce n'est pas réellement ce qui se passe. Je suis en train de lancer ES6 modules en natif dans le navigateur (<script type="module">
) et les erreurs ci-dessus sont ce que vous obtenez si vous exécutez leimport
ligne directement. S'il vous plaît corrigez-moi si je me trompe et que vous n'avez, en fait, dire qu'il est possible d'importer de JSON dans le réel ES6.import
déclaration à un nœudrequire()
(essayez!), et le deuxième lien ne dit rien sur JSON importations. Le problème ici n'est pas avec l'analyseur ou le système de module, c'est le chargeur, le navigateur du chargeur ne résout pas une importation à des fins autres que Javascript. Sous le capot, vous devez toujours utiliser un appel AJAX (fetch / XHR) et d'analyser le résultat, même si votre construction de la chaîne de résumés à l'écart.Malheureusement ES6/ES2015 ne prend pas en charge le chargement JSON via le module d'importation de la syntaxe. Mais...
Il ya beaucoup de façons dont vous pouvez faire. Selon vos besoins, vous pouvez soit regarder dans la façon de lire les fichiers en JavaScript (
window.FileReader
pourrait être une option si vous êtes en cours d'exécution dans le navigateur) ou utiliser d'autres chargeurs comme décrit dans d'autres questions (en supposant que vous utilisez NodeJS).OMI façon la plus simple est probablement de mettre juste le JSON comme un objet JS dans un ES6 module et de l'exporter. De cette façon, vous pouvez simplement importer où vous en avez besoin.
Également intéressant de noter que si vous utilisez Webpack, l'importation de fichiers JSON fonctionnera par défaut (depuis
webpack >= v2.0.0
).Je suis l'aide de babel+browserify et j'ai un fichier JSON dans un répertoire ./i18n/locale-fr.json avec des traductions de noms (pour être utilisé avec ngTranslate).
Sans avoir à exporter rien dans le fichier JSON (qui d'ailleur n'est pas possible), j'ai pu faire une importation par défaut de son contenu avec cette syntaxe:
Si vous êtes à l'aide d'un noeud, vous pouvez:
OU
D'autre:
OU
Un peu en retard, mais je viens de tombé sur le même problème en essayant de fournir des analyses pour mon application web qui a impliqué l'envoi de la version de l'application basée sur le paquet.version json.
Configuration est comme suit: Réagir + Redux, Webpack 3.5.6
Le json-chargeur n'est pas effectuer depuis Webpack 2+, donc après quelques tripoter, j'ai fini par l'enlever.
La solution qui fonctionne pour moi, était tout simplement à l'aide de fetch.
Bien que ce sera très probablement faire appliquer certaines modifications de code pour s'adapter à l'approche asynchrone, il a parfaitement fonctionné, en particulier compte tenu du fait que chercher offrira décodage json à la volée.
Si elle est ici:
Ne garder à l'esprit que, puisque nous parlons de package.json spécifiquement ici, le fichier ne sera pas généralement livrés dans votre production de construire (ou même les dev d'ailleurs), de sorte que vous aurez à utiliser la CopyWebpackPlugin d'avoir accès lors de l'utilisation d'extraction.