我对 ES6 中的 import 有什么误解？

Question

我已经使用 React 中的标记库完成了非常简单的 markdown 预览器。起初我通过在

中的 Index.html 添加脚本来做到这一点

<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@latest/dist/react.js">
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js">
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
    <script type="text/babel" src="script.js" ></script>
</body>

一切正常，但是当我删除字符串 react.js 和 react-dom.js，并将它们添加到 script.js 时，我在控制台中看到一个错误：

import React from "react.min"
import ReactDOM from "react-dom.min"
class Input extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        _text: "",
    };
}

handleChange(e) {
    this.setState({
        _text: marked(e.target.value)
    });
}

createMarkup() {
    let outPutVal = this.state._text ? this.state._text : this.state._init;
    return {
        __html: outPutVal
    };
}

render() {
    return (<form className="headDiv">
            <textarea onChange={this.handleChange.bind(this)}
                      placeholder="Remember, be nice!"
                      id="inputText" rows="25" cols="100">{this.state._text}</textarea>
        <output id="outputText" dangerouslySetInnerHTML={this.createMarkup()} />
    </form>);
 }
}

ReactDOM.render(<Input/>, document.getElementById("root"));

Answer 1

当使用 JS 模块时，Babel 只处理将 import 语句转换为 CommonJS require 调用——你仍然需要某种模块加载器来实际处理将它们全部链接起来。

您可以使用的一些工具示例是：

就是说，由于您将库作为脚本标记包含在页面中，因此完全删除导入可能会解决您的问题 - 但这种方法确实无法很好地扩展，所以我鼓励您研究以上工具！

Answer 2

使用 npm 安装后，您通常只需按如下方式导入（无 .min）：

import React from 'react';
import ReactDOM from 'react-dom';

您可能想要考虑像 create-react-app 这样的样板 - 非常适合从环境开始专注于学习反应。

create-react-app

Answer 3

要在 JSX code 中使用 import，您需要使用 webpack 或 browserify。您还需要在导入之前使用 npm 安装这些模块

为了安装它们运行

npm install -S react-dom
npm install -S react

您稍后可以将它们导入为

import React from 'react';
import ReactDOM from 'react-dom';

Here 是一个简单的教程，您可以按照该教程使用 webpack 设置您的 React 代码

我对 ES6 中的 import 有什么误解？

What do I misunderstand about import in ES6?

ecmascript-6

reactjs

es6-modules