简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - ES6 import
伊谢尔伦
伊谢尔伦 2017-04-11 12:07:43
0
1
559

最近在学习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": []
  }
伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

reply all(1)
大家讲道理
大家讲道理2017-04-11 12:09:43 1 floor

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

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！