search

Home  >  Q&A  >  body text

javascript - ES6 import

最近在学习React ES6的写法，遇到一个问题。

src/helloworld.js

import React, {
  Component,
} from 'react';

import ReactDom from 'react-dom';

class HelloReact extends Component {
  render() {
    return (
      <p> Hello React</p>
    );
  }
}

ReactDom.render(<HelloReact/>, document.getElementById('example'));

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
  </head>
  <body>
    <p id="example"></p>
    <script type="text/babel" src="build/helloworld.js"></script>
  </body>
</html>

我用babel cli将helloworld.js转码后载入index.html。但是报错 require is not defined。

我看了下babel将src中的import转成了require。这么说难道我还要在index.html中载入require.js吗？

.babelrc

{
    "presets": [
      "es2015", "react"
    ],
    "plugins": []
  }
伊谢尔伦伊谢尔伦2792 days ago568

reply all(1)I'll reply

  • 大家讲道理

    大家讲道理2017-04-11 12:09:43

    js模块化有AMD,CMD,UMD,CommonJS等，你用babel转换的js文件，是将es6的import转换为了es5的CommonJS规范的require，浏览器端是不支持CommonJS的（除非用工具入browserify），可以设置转换为AMD规范的模块化写法，再用requireJS，或者你也可以使用browserify。单最好的方式是使用Webpack，Webpack支持各种模块化规范，react开发必备

    reply
    0
  • Cancelreply