フェッチメソッドが定義されていません。RE6でフェッチします。

Question

ちょっとちょっと私の最初のリアクションjsアプリでフェッチ機能に問題があります。

これが私のプロジェクトの構造である：

hello-world 
    -- app 
    -- components 
     -- main.jsx 
    -- node_modules 
    -- public 
    -- build.js 
    -- index.html 
    -- package.json 

これは私がNPMを使用してインストールしたものです：

npm install react react-dom babel-core babel-loader babel-preset-es2015 babel-preset-react webpack --save-dev 
npm install --save isomorphic-fetch es6-promise 

私はWebPACKの webpack.config

module.exports = { 
    entry: './app/components/main.jsx', 
    output: { 
    path: './public/', 
    filename: "build.js", 
    }, 
    module: { 
    loaders: [ 
     { 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel', 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     } 
    ] 
    } 
}; 

を使用package.json

私は（メソッドが定義されていないフェッチ）私も持っている、それが失敗したブラウザを介してそれを実行しようとした場合

main.jsx

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import 'isomorphic-fetch'; 
import 'es6-promise'; 

class Person extends React.Component { 

    constructor(props){ 
    super(props); 
    this.state = {people : []}; 
    } 

    componentWillMount(){ 
    fetch('xxx/people', 
     method: 'get', 
     headers: {'token' : 'xxx'} 
    ) 
     .then((response) => { 
     return response.json() 
     }) 
     .then((people) => { 
     this.setState({ people: people }) 
     }) 
    } 

    render(){ 
    return <div> 
     <input type="text" value={this.state.people[0].name}></input> 
     </div> 
    } 
} 

ReactDOM.render(
    <Person/>, 
    document.getElementById('container') 
); 

：

{ 
    "name": "hello-world", 
    "version": "1.0.0", 
    "description": "", 
    "main": "webpack.config.js", 
    "scripts": { 
    "build": "webpack -w" 
    }, 
    "author": "mannuk", 
    "license": "MIT", 
    "devDependencies": { 
    "babel-core": "^6.14.0", 
    "babel-loader": "^6.2.5", 
    "babel-preset-es2015": "^6.14.0", 
    "babel-preset-react": "^6.11.1", 
    "react": "^0.14.8", 
    "react-dom": "^0.14.8", 
    "webpack": "^1.13.2" 
    }, 
    "dependencies": { 
    "es6-promise": "^3.3.1", 
    "isomorphic-fetch": "^2.2.1" 
    } 
} 

は、これは私がUIを構築するファイルでありますこの功績のある投稿ES6 `fetch is undefined`を確認しました。私はインポートは成功していません。私はes6-promise importも含めましたが、失敗します。

私は間違っていますか？それは設定の問題か何ですか？私が 'npm run build'を実行すると、エラーはなく、build.jsはokと思われます。

Answer 1

それは、エクスポートデフォルトですので、これは正しいアプローチであるために...

import fetch from 'isomorphic-fetch' 

Answer 2

はポリフィルを追加します。私の最新プロジェクトの1つを見ると、以下の輸入を行うだけです。

import promise from 'es6-promise'; 
import 'isomorphic-fetch'; 

promise.polyfill(); 

.polyfill（）メソッドを呼び出さなければならないes6-promise importが正しくないようです。私は一度だけそれらをインポートする必要があるので、アプリケーションのエントリポイントにこれらを配置することをお勧めします。

バベルのポリフィルを含めることをおすすめします。

あなたは `インポートは「同型フェッチ」からのフェッチとフェッチインポートしない理由

import 'babel-polyfill';