Comment l'objet d'importation de fichier JS externe à Réagir JS web à l'aide de pack
Je suis appuyant sur ma connaissance de Réagir JS et je voudrais importer/externes fichiers JS qui détiennent rien de plus que des objets /tableaux d'objets. Je l'ai fait en jQuery, la Vanille JS et même en Angular JS. Sweet!!!
Comment puis-je obtenir la même chose à Réagir JS.
J'ai le texte suivant comme mon index.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello React</title>
</head>
<body>
<div id="hello"></div>
<div id="world"></div>
<div id="caseListing"></div>
<script src="js/bundle.js"></script>
</body>
</html>
et mon main.js (entrée de fichier) comme suit:
import Hello from './jsx/hello.jsx';
import World from './jsx/world.jsx';
var $ = require('./lib/jquery.js');
window.jQuery = $;
window.$ = $;
var Jobs = require('./data/jobs.js');
console.log('Jobs:', Jobs);
Ici, j'ai Jobs.js comme:
var Jobs = (function () {
"use strict";
return {
"jobs": [
{
"jobType": "Web developer",
"desc": "Creates website"
},
{
"jobType": "Bin Man",
"desc": "Collects bins"
}
]
};
}());
Et, pour faire bonne mesure, mon webpack.config.js ressemble à ceci:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'./js/main.js'
],
output: {
path: __dirname,
filename: 'js/bundle.js'
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: [
'es2015',
'react'
]
}
}
]
}
};
Toute aide sera appréciée. 🙂
OriginalL'auteur Mr. Benedict | 2016-08-27
Vous devez vous connecter pour publier un commentaire.
Vous avez besoin d'exporter des Emplois de jobs.js afin de l'importer dans un autre module. Et jobs.js n'a pas besoin d'être une fonction si votre seulement l'exportation de données statiques. Ainsi, vous pouvez faire jobs.js ressembler à ceci:
Ensuite, vous pouvez l'importer comme suit:
Ou:
Si vous voulez imposer à la normale commonjs syntaxe ensuite, vous pouvez faire jobs.js comme ceci:
Qui vous permet d'exiger de la sorte:
OriginalL'auteur Ben Sidelinger
Disons que le fichier que vous êtes en gardant vos données est appelé "file.js."
En dessous de cette ligne, Vous devez exporter cette variable de sorte qu'il peut être importé dans la Réagir code:
La chaîne est stockée comme un objet appelé "data".
Vous importez ensuite le contenu de "file.js" dans le fichier que vous souhaitez utiliser, disons App.jsx".
Le contenu de l'objet que vous avez exporté dans l'autre fichier est stockée sous la variable "fichier" ici. Vous pouvez ensuite convertir le contenu de "fichier" pour un objet:
Votre chaîne "Hello world!", est maintenant stockée dans la variable str.
Espérons que cette aide!
OriginalL'auteur Adam Touhou