javascript - ES6 import
伊谢尔伦
伊谢尔伦 2017-04-11 12:07:43
0
1
583

最近在学习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伐。

Antworte allen(1)
大家讲道理

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

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage