为什么进口不起作用

Question

我正在使用云9作为我的react / angular项目。我已成功初始化npm并安装了一些软件包，我想安装react-inline-edit 我做到了但是当我即将使用它时import InlineEdit from 'react-edit-inline'一切都破了 直到现在我从未要求或进口任何东西。这是我的package.json：

{
  "name": "my-merge-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel reactSource -d reactDirective -w -s"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.11.4",
    "babel-preset-es2015": "^6.13.2",
    "react-edit-inline": "^1.0.7"
  },
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  },
  "dependencies": {
    "react-edit-inline": "^1.0.7"
  }
}

和我的config.js文件：

import InlineEdit from 'react-edit-inline';
var FormattedDate = ReactIntl.FormattedDate;
var DiaryTable = React.createClass({displayName: "DiaryTable",
    getInitialState: function() {
        return {
            items : this.props.item,
            globalChecked:false
        };
    },
    handleAddElement(element) {
        if(this.state.globalChecked)
        {
            element.selected = this.state.globalChecked;
        }
        this.state.items.push(element);
        this.setState(this.state.items);
    },
    handleEditElement(element,index){
        if(this.state.items[index].selected)
        {
            element.selected = this.state.items[index].selected;
        }
        this.state.items[index] = element;
        this.setState(this.state.items);
    },
    handleChecked : function (i) {
        this.state.items[i].selected =  !this.state.items[i].selected;
        this.setState(this.state.items);
    },
    checkAll:function () {
        console.log(this.state.items);
        this.state.globalChecked = !this.state.globalChecked;
        this.setState({globalChecked:this.state.globalChecked});
        var ifChecked = this.state.globalChecked;
        this.state.items = this.state.items.map(function(element) {
            return { start: element.start,end:element.end,hours:element.hours,selected: ifChecked };
        });
        this.setState({items:this.state.items});
    },
    remove : function () {
        for(var i = 0;i<this.state.items.length;i++)
        {
            if(this.state.items[i].selected)
            {
               this.state.items.splice(i,1);
                i--;
            }
        }
        this.setState(this.state.items);
    },
    setResult:function () {
        this.state.items.length = 0;
        if(this.state.globalChecked)
        {
            for(var i=0;i<this.props.result.item.length;i++){
                this.state.items[i] = {start:this.props.result.item[i].start,end:this.props.result.item[i].end,hours:this.props.result.item[i].hours,selected:true};
            }
            this.setState(this.state.items);
        }
        else {
            for(var i=0;i<this.props.result.item.length;i++){
                this.state.items[i] = {start:this.props.result.item[i].start,end:this.props.result.item[i].end,hours:this.props.result.item[i].hours};
            }
            this.setState(this.state.items);
        }
    },
    render: function(){
        var arrayItems =  this.state.items.map(function (item,i) {
            return (
                <tr key={i}>
                    <td><input type="checkbox"  checked={item.selected} onClick={this.handleChecked.bind(this,i)}/></td>
                    <td><FormattedDate value={item.start}/></td>
                    <td><FormattedDate value={item.end}/></td>
                    <td>{Number(item.hours)}</td>
                    <td>
                        <ModalEditElement items={this.state.items} onEditElement={this.handleEditElement} index={i} checked={this.state.globalChecked} ></ModalEditElement>
                    </td>
                </tr>
            );
        }.bind(this));
        return (
            <table className="myTable">
                <thead>
                <tr>
                    <th><input type="checkbox" onClick={this.checkAll}/></th>
                    <th>Start Date:</th>
                    <th>End Date:</th>
                    <th id="hoursField">Hours:</th>
                    <th id="editField">Edit:</th>
                </tr>
                </thead>
                <tbody>
                {arrayItems}
                </tbody>
                <tfoot>
                <tr>
                    <td colSpan="4">
                        <span className="addButtonDisplay"><ModalAddElement onAddElement={this.handleAddElement} items={this.state.items} checked={this.state.globalChecked}></ModalAddElement></span>
                        <button className="myButton" onClick={this.remove}>Remove period</button>
                        <button className="myButton" disabled={this.props.result.item.length === 0} onClick={this.setResult}>Set result from merge</button>
                    </td>
                </tr>
                </tfoot>
            </table>
        );
    }
 });

的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="-1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Merging Arrays</title>

    <!--css styles start-->
    <link rel="stylesheet" media="(min-width:1171px)" href="css/styles.css">
    <link rel="stylesheet" media="(max-width:1171px)" href="css/anotherStyle.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/sweetalert.css">
    <link rel="stylesheet" href="css/jquery.base.css">
    <link rel="stylesheet" href="css/jquery.datepick.css">
    <link rel="stylesheet" href="css/redmond.datepick.css">
    <!--css styles end-->

    <!--js resources start-->
    <script src="js/jquery.js"></script>
    <script src="js/react.js"></script>
    <script src="js/angular.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/ngReact.js"></script>
    <script src="js/react-intl.js"></script>
    <script src="js/react-bootstrap.js"></script>
    <script src="js/moment.js"></script>
    <script src="js/sweetalert.min.js"></script>
    <script src="js/jquery.plugin.js"></script>
    <script src="js/jquery.datepick.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="js/jQueryValidationMethods.js"></script>
    <script src="js/messageValidationOverride.js"></script>
    <script src="reactDirective/diaryComponent.js"></script>
    <script src="js/config.js"></script>
    <!--js resources end-->
</head>

我正在尝试将其导入我的config.js文件，而不是我的index.html（这是正确的吗？）。问题是，到目前为止，我所拥有的一切，如外部文件，都在我的项目中，并且我以标准方式<script src="..."> </script>链接它。 在我正在关注的示例中，他们也从React导入React，但我已经按照我提到的方式（<script></script>）进行了链接。

控制台说需要IS NOT DEFINED。

也许我应该导入Boostrap，Angular，React以及我使用的所有东西，就像这个导入工作react-inline-edit ??但我不明白为什么他们已经在我的html链接了.. 任何人都可以帮我导入/要求文件或告诉我哪里出错了吗？