如何使用Web包在React JS中从外部JS文件导入对象 [英] How import object from external JS file in React JS using web pack
问题描述
我正在构建我对React JS的了解，并且我想导入/包含一些外部JS文件，这些文件只包含一个对象/对象数组。我已经在jQuery，Vanilla JS甚至Angular JS中完成了这个。甜！！！
I am building on my knowledge of React JS and I would like to import/include some external JS files that hold nothing more than an objects / object arrays. I've done this in jQuery, Vanilla JS and even in Angular JS. Sweet!!!
如何在React JS中实现相同的功能。
How can I achieve the same thing in React JS.
我有以下作为我的index.html ：
I have the following as my 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>
和我的main.js（条目文件）如下：
and my main.js (entry file) as the following:
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);
在这里，我将Jobs.js作为：
Here, I have Jobs.js as:
var Jobs = (function () {
"use strict";
return {
"jobs": [
{
"jobType": "Web developer",
"desc": "Creates website"
},
{
"jobType": "Bin Man",
"desc": "Collects bins"
}
]
};
}());
我的webpack.config.js看起来像这样：
And just for good measure, my webpack.config.js looks like this:
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'
]
}
}
]
}
};
我们将不胜感激。 ：）
All help will be appreciated. :)
推荐答案
您需要从jobs.js导出作业，以便将其导入另一个模块。如果只是导出静态数据，jobs.js不需要是一个函数。所以，你可以让jobs.js看起来像这样：
You need to export Jobs from jobs.js in order to import it into another module. And jobs.js doesn't need to be a function if your just exporting static data. So, you can make jobs.js look like this:
export default {
jobs: [
{
jobType: "Web developer",
desc: "Creates website"
},
{
jobType: "Bin Man",
desc: "Collects bins"
}
]
};
然后你可以像这样导入它：
Then you can import it like so:
import Jobs from './data/jobs.js';
或者：
var Jobs = require('./data/jobs.js').default;
如果您想要使用普通的commonjs语法，那么您可以像这样制作jobs.js：
If you want to require with normal commonjs syntax then you can make jobs.js like this:
module.exports = {
jobs: [
{
jobType: "Web developer",
desc: "Creates website"
},
{
jobType: "Bin Man",
desc: "Collects bins"
}
]
};
允许您这样要求：
var Jobs = require('./data/jobs.js');
这篇关于如何使用Web包在React JS中从外部JS文件导入对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
