感谢 Webpack ,该项目设置支持 ES6 modules。
虽然你仍然可以使用 require()
和 module.exports
,但我们建议你使用 import
和 export
。
例如:
Button.js
import React, { Component } from 'react'; class Button extends Component { render() { // ... } } export default Button; // 别忘了使用 export default !
DangerButton.js
import React, { Component } from 'react'; import Button from './Button'; // 从其他文件导入一个组件 class DangerButton extends Component { render() { return <Button color="red"/>; } } export default DangerButton;
请注意 默认导出和命名导出之间的区别。 这是一个常见的错误来源。
我们建议你在模块仅导出单个内容(例如,组件)时坚持使用默认import
和 export
。 当你使用 export default Button
时,可以使用 import Button from './Button'
导入。
命名导出对于导出多个函数的实用程序模块很有用。 一个模块最多可以有一个默认导出和任意多个命名导出。
了解有关ES6模块的更多信息:
- 什么时候使用花括号?
- 探索ES6:Modules (中文)
- 了解ES6:Modules