web-dev-qa-db-ja.com

Webパックを使用してReact JSで外部JSファイルからオブジェクトをインポートする方法

React JSの知識に基づいて構築しています。オブジェクト/オブジェクト配列以外のものを保持しない外部JSファイルをインポート/インクルードしたいと思います。これをjQuery、Vanillaで行いました。 JSとAngular JS。Sweet !!!

React JS。で同じことをどのように達成できますか？.

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（エントリファイル）：

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があります：

var Jobs = (function () {
    "use strict";
    return {
        "jobs": [
            {
                "jobType": "Web developer",
                "desc": "Creates website"
            },
            {
                "jobType": "Bin Man",
                "desc": "Collects bins"
            }
        ]
    };
}());

そしてちょうど良い測定のために、私の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'
                    ]
                }
            }
        ]
    }
};

すべての助けをいただければ幸いです。 :)

javascriptreactjsecmascript-6webpackbabeljs
9
Mr. Benedict

別のモジュールにインポートするには、jobs.jsからジョブをエクスポートする必要があります。また、jobs.jsは、静的データをエクスポートするだけであれば、関数である必要はありません。したがって、jobs.jsを次のようにすることができます。

export default {
    jobs: [
        {
            jobType: "Web developer",
            desc: "Creates website"
        },
        {
            jobType: "Bin Man",
            desc: "Collects bins"
        }
    ]
};

その後、次のようにインポートできます。

import Jobs from './data/jobs.js';

または：

var Jobs = require('./data/jobs.js').default;

通常のcommonjs構文で要求する場合、次のようにjobs.jsを作成できます。

module.exports = {
    jobs: [
        {
            jobType: "Web developer",
            desc: "Creates website"
        },
        {
            jobType: "Bin Man",
            desc: "Collects bins"
        }
    ]
};

これにより、次のように要求できます。

var Jobs = require('./data/jobs.js');
19
Ben Sidelinger

データを保持しているファイルの名前を「file.js」としましょう。

var text = "Hello world!"; //In file.js

この行の下で、React=コードでインポートできるように、この変数をエクスポートする必要があります。

module.exports = {data: text} //In file.js

文字列は「データ」と呼ばれるオブジェクトとして保存されます。次に、「file.js」の内容を使用するファイルにインポートします。たとえば、App.jsxとします。

import file from './file.js'; //In App.jsx

他のファイルでエクスポートしたオブジェクトの内容は、ここで変数「file」として保存されています。次に、「ファイル」の内容をオブジェクトに変換できます。

var str = file.data; //"data" is the object within "file"

これで、文字列「Hello world！」が変数strに格納されました。

お役に立てれば！

12
Adam Touhou