javascript - ES6 import
本文介绍了javascript - ES6 import的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
最近在学习React ES6的写法，遇到一个问题。
src/helloworld.js
import React, {
Component,
} from 'react';
import ReactDom from 'react-dom';
class HelloReact extends Component {
render() {
return (
<div> Hello React</div>
);
}
}
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>
<div id="example"></div>
<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": []
}
解决方案
js模块化有AMD,CMD,UMD,CommonJS等，你用babel转换的js文件，是将es6的import转换为了es5的CommonJS规范的require，浏览器端是不支持CommonJS的（除非用工具入browserify），可以设置转换为AMD规范的模块化写法，再用requireJS，或者你也可以使用browserify。单最好的方式是使用Webpack，Webpack支持各种模块化规范，react开发必备
这篇关于javascript - ES6 import的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
