Javascript 如何使用 web pack 从 React JS 中的外部 JS 文件导入对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39184389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How import object from external JS file in React JS using web pack
提问by Mr. Benedict
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 的了解之上，我想导入/包含一些仅包含对象/对象数组的外部 JS 文件。我已经在 jQuery、Vanilla JS 甚至 Angular JS 中完成了这项工作。甜的！！！
How can I achieve the same thing in React JS.
我怎样才能在 React JS 中实现同样的事情。
I have the following as my index.html:
我有以下内容作为我的 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>
and my main.js (entry file) as the following:
和我的 main.js（入口文件）如下：
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);
Here, I have Jobs.js as:
在这里，我将 Jobs.js 设为：
var Jobs = (function () {
"use strict";
return {
"jobs": [
{
"jobType": "Web developer",
"desc": "Creates website"
},
{
"jobType": "Bin Man",
"desc": "Collects bins"
}
]
};
}());
And just for good measure, my webpack.config.js looks like this:
为了更好的衡量，我的 webpack.config.js 看起来像这样：
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. :)
所有帮助将不胜感激。:)
回答by Ben Sidelinger
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:
您需要从 jobs.js 中导出 Jobs 才能将其导入另一个模块。如果您只是导出静态数据，则jobs.js 不需要是一个函数。所以，你可以让jobs.js看起来像这样：
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';
Or:
或者：
var Jobs = require('./data/jobs.js').default;
If you want to require with normal commonjs syntax then you can make jobs.js like this:
如果你想使用普通的 commonjs 语法，那么你可以像这样制作 jobs.js：
module.exports = {
jobs: [
{
jobType: "Web developer",
desc: "Creates website"
},
{
jobType: "Bin Man",
desc: "Collects bins"
}
]
};
Which allows you to require like so:
这允许您像这样要求：
var Jobs = require('./data/jobs.js');
回答by Adam Touhou
Let's say the file you're keeping your data in is called "file.js."
假设您保存数据的文件称为“file.js”。
var text = "Hello world!"; //In file.js
Below this line, You must export this variable so that it can be imported in the React code:
在此行下方，您必须导出此变量，以便可以在 React 代码中导入它：
module.exports = {data: text} //In file.js
The string is stored as an object called "data." You then import the contents of "file.js" in the file you wish to use it, let's say App.jsx".
该字符串存储为称为“数据”的对象。然后将“file.js”的内容导入到要使用的文件中，比如说 App.jsx”。
import file from './file.js'; //In App.jsx
The contents of the object you exported in the other file is being stored as the variable "file" here. You can then convert the contents of "file" to an object:
您在另一个文件中导出的对象的内容在此处存储为变量“文件”。然后，您可以将“文件”的内容转换为对象：
var str = file.data; //"data" is the object within "file"
Your string, "Hello world!", is now stored within the variable str.
您的字符串“Hello world!”现在存储在变量 str 中。
Hope this helps!
希望这可以帮助！
