Convert requires to import

src/components/asset-panel/asset-panel.jsx

@@ -1,8 +1,8 @@
-const React = require('react');
+import React from 'react';
 
-const Box = require('../box/box.jsx');
-const Selector = require('./selector.jsx');
-const styles = require('./asset-panel.css');
+import Box from '../box/box.jsx';
+import Selector from './selector.jsx';
+import styles from './asset-panel.css';
 
 const AssetPanel = props => (
     <Box className={styles.wrapper}>

src/components/asset-panel/selector.jsx

@@ -1,11 +1,11 @@
-const PropTypes = require('prop-types');
-const React = require('react');
-const {FormattedMessage} = require('react-intl');
+import PropTypes from 'prop-types';
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
 
-const SpriteSelectorItem = require('../../containers/sprite-selector-item.jsx');
+import SpriteSelectorItem from '../../containers/sprite-selector-item.jsx';
 
-const Box = require('../box/box.jsx');
-const styles = require('./selector.css');
+import Box from '../box/box.jsx';
+import styles from './selector.css';
 
 const Selector = props => {
     const {

src/components/blocks/blocks.jsx

@@ -1,7 +1,7 @@
-const PropTypes = require('prop-types');
-const React = require('react');
-const Box = require('../box/box.jsx');
-const styles = require('./blocks.css');
+import PropTypes from 'prop-types';
+import React from 'react';
+import Box from '../box/box.jsx';
+import styles from './blocks.css';
 
 const BlocksComponent = props => {
     const {

src/components/box/box.jsx

@@ -1,8 +1,8 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
-const stylePropType = require('react-style-proptype');
-const styles = require('./box.css');
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import stylePropType from 'react-style-proptype';
+import styles from './box.css';
 
 const getRandomColor = (function () {
     // In "DEBUG" mode this is used to output a random background color for each

src/components/button/button.jsx

@@ -1,8 +1,8 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
 
-const styles = require('./button.css');
+import styles from './button.css';
 
 const ButtonComponent = ({
     className,

src/components/close-button/close-button.jsx

@@ -1,9 +1,9 @@
-const PropTypes = require('prop-types');
-const React = require('react');
-const classNames = require('classnames');
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
 
-const styles = require('./close-button.css');
-const closeIcon = require('./icon--close.svg');
+import styles from './close-button.css';
+import closeIcon from './icon--close.svg';
 
 const CloseButton = props => (
     <div

src/components/costume-canvas/costume-canvas.jsx

@@ -1,7 +1,7 @@
-const PropTypes = require('prop-types');
-const React = require('react');
-const svgToImage = require('svg-to-image');
-const xhr = require('xhr');
+import PropTypes from 'prop-types';
+import React from 'react';
+import svgToImage from 'svg-to-image';
+import xhr from 'xhr';
 
 /**
  * @fileoverview

src/components/filter/filter.jsx

@@ -1,10 +1,10 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
 
-const filterIcon = require('./icon--filter.svg');
-const xIcon = require('./icon--x.svg');
-const styles = require('./filter.css');
+import filterIcon from './icon--filter.svg';
+import xIcon from './icon--x.svg';
+import styles from './filter.css';
 
 const FilterComponent = props => {
     const {

src/components/green-flag/green-flag.jsx

@@ -1,9 +1,9 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
 
-const greenFlagIcon = require('./icon--green-flag.svg');
-const styles = require('./green-flag.css');
+import greenFlagIcon from './icon--green-flag.svg';
+import styles from './green-flag.css';
 
 const GreenFlagComponent = function (props) {
     const {

src/components/gui/gui.jsx

@@ -1,22 +1,22 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
-const {Tab, Tabs, TabList, TabPanel} = require('react-tabs');
-const tabStyles = require('react-tabs/style/react-tabs.css');
-const VM = require('scratch-vm');
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
+import tabStyles from 'react-tabs/style/react-tabs.css';
+import VM from 'scratch-vm';
 
-const Blocks = require('../../containers/blocks.jsx');
-const CostumeTab = require('../../containers/costume-tab.jsx');
-const GreenFlag = require('../../containers/green-flag.jsx');
-const TargetPane = require('../../containers/target-pane.jsx');
-const SoundTab = require('../../containers/sound-tab.jsx');
-const Stage = require('../../containers/stage.jsx');
-const StopAll = require('../../containers/stop-all.jsx');
+import Blocks from '../../containers/blocks.jsx';
+import CostumeTab from '../../containers/costume-tab.jsx';
+import GreenFlag from '../../containers/green-flag.jsx';
+import TargetPane from '../../containers/target-pane.jsx';
+import SoundTab from '../../containers/sound-tab.jsx';
+import Stage from '../../containers/stage.jsx';
+import StopAll from '../../containers/stop-all.jsx';
 
-const Box = require('../box/box.jsx');
-const MenuBar = require('../menu-bar/menu-bar.jsx');
+import Box from '../box/box.jsx';
+import MenuBar from '../menu-bar/menu-bar.jsx';
 
-const styles = require('./gui.css');
+import styles from './gui.css';
 
 
 const GUIComponent = props => {

src/components/library-item/library-item.jsx

@@ -1,9 +1,9 @@
-const bindAll = require('lodash.bindall');
-const PropTypes = require('prop-types');
-const React = require('react');
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
 
-const Box = require('../box/box.jsx');
-const styles = require('./library-item.css');
+import Box from '../box/box.jsx';
+import styles from './library-item.css';
 
 class LibraryItem extends React.PureComponent {
     constructor (props) {

src/components/library/library.jsx

@@ -1,11 +1,11 @@
-const bindAll = require('lodash.bindall');
-const PropTypes = require('prop-types');
-const React = require('react');
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
 
-const LibraryItem = require('../library-item/library-item.jsx');
-const ModalComponent = require('../modal/modal.jsx');
+import LibraryItem from '../library-item/library-item.jsx';
+import ModalComponent from '../modal/modal.jsx';
 
-const styles = require('./library.css');
+import styles from './library.css';
 
 class LibraryComponent extends React.Component {
     constructor (props) {

src/components/load-button/load-button.jsx

@@ -1,9 +1,9 @@
-const PropTypes = require('prop-types');
-const React = require('react');
+import PropTypes from 'prop-types';
+import React from 'react';
 
-const ButtonComponent = require('../button/button.jsx');
+import ButtonComponent from '../button/button.jsx';
 
-const styles = require('./load-button.css');
+import styles from './load-button.css';
 
 const LoadButtonComponent = ({
     inputRef,

src/components/menu-bar/menu-bar.jsx

@@ -1,12 +1,12 @@
-const classNames = require('classnames');
-const React = require('react');
+import classNames from 'classnames';
+import React from 'react';
 
-const Box = require('../box/box.jsx');
-const LoadButton = require('../../containers/load-button.jsx');
-const SaveButton = require('../../containers/save-button.jsx');
+import Box from '../box/box.jsx';
+import LoadButton from '../../containers/load-button.jsx';
+import SaveButton from '../../containers/save-button.jsx';
 
-const styles = require('./menu-bar.css');
-const scratchLogo = require('./scratch-logo.svg');
+import styles from './menu-bar.css';
+import scratchLogo from './scratch-logo.svg';
 
 const MenuBar = function MenuBar () {
     return (

src/components/meter/meter.jsx

@@ -1,6 +1,6 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const styles = require('./meter.css');
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './meter.css';
 
 const Meter = props => {
     const {

src/components/modal/modal.jsx

@@ -1,13 +1,13 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
-const ReactModal = require('react-modal');
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ReactModal from 'react-modal';
 
-const Box = require('../box/box.jsx');
-const CloseButton = require('../close-button/close-button.jsx');
-const Filter = require('../filter/filter.jsx');
+import Box from '../box/box.jsx';
+import CloseButton from '../close-button/close-button.jsx';
+import Filter from '../filter/filter.jsx';
 
-const styles = require('./modal.css');
+import styles from './modal.css';
 
 class ModalComponent extends React.Component {
     render () {

src/components/monitor-list/monitor-list.jsx

@@ -1,11 +1,11 @@
-const React = require('react');
-const Box = require('../box/box.jsx');
-const Monitor = require('../../containers/monitor.jsx');
-const PropTypes = require('prop-types');
-const {OrderedMap} = require('immutable');
+import React from 'react';
+import Box from '../box/box.jsx';
+import Monitor from '../../containers/monitor.jsx';
+import PropTypes from 'prop-types';
+import {OrderedMap} from 'immutable';
 
 
-const styles = require('./monitor-list.css');
+import styles from './monitor-list.css';
 
 const MonitorList = props => (
     <Box

src/components/monitor/monitor.jsx

@@ -1,8 +1,8 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const Draggable = require('react-draggable');
-const Box = require('../box/box.jsx');
-const styles = require('./monitor.css');
+import React from 'react';
+import PropTypes from 'prop-types';
+import Draggable from 'react-draggable';
+import Box from '../box/box.jsx';
+import styles from './monitor.css';
 
 const categories = {
     data: '#FF8C1A',

src/components/prompt/prompt.jsx

@@ -1,9 +1,9 @@
-const PropTypes = require('prop-types');
-const React = require('react');
-const Modal = require('../modal/modal.jsx');
-const Box = require('../box/box.jsx');
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from '../modal/modal.jsx';
+import Box from '../box/box.jsx';
 
-const styles = require('./prompt.css');
+import styles from './prompt.css';
 
 const PromptComponent = props => (
     <Modal

src/components/record-modal/playback-step.jsx

@@ -1,13 +1,13 @@
-const PropTypes = require('prop-types');
-const React = require('react');
-const Box = require('../box/box.jsx');
-const Waveform = require('../waveform/waveform.jsx');
-const Meter = require('../meter/meter.jsx');
+import PropTypes from 'prop-types';
+import React from 'react';
+import Box from '../box/box.jsx';
+import Waveform from '../waveform/waveform.jsx';
+import Meter from '../meter/meter.jsx';
 
-const styles = require('./record-modal.css');
-const backIcon = require('./icon--back.svg');
-const stopIcon = require('./icon--stop-playback.svg');
-const playIcon = require('./icon--play.svg');
+import styles from './record-modal.css';
+import backIcon from './icon--back.svg';
+import stopIcon from './icon--stop-playback.svg';
+import playIcon from './icon--play.svg';
 
 const PlaybackStep = props => (
     <Box>

src/components/record-modal/record-modal.jsx

@@ -1,10 +1,10 @@
-const PropTypes = require('prop-types');
-const React = require('react');
-const Box = require('../box/box.jsx');
-const RecordingStep = require('../../containers/recording-step.jsx');
-const PlaybackStep = require('../../containers/playback-step.jsx');
-const Modal = require('../modal/modal.jsx');
-const styles = require('./record-modal.css');
+import PropTypes from 'prop-types';
+import React from 'react';
+import Box from '../box/box.jsx';
+import RecordingStep from '../../containers/recording-step.jsx';
+import PlaybackStep from '../../containers/playback-step.jsx';
+import Modal from '../modal/modal.jsx';
+import styles from './record-modal.css';
 
 const RecordModal = props => (
     <Modal

src/components/record-modal/recording-step.jsx

@@ -1,11 +1,11 @@
-const PropTypes = require('prop-types');
-const React = require('react');
-const Box = require('../box/box.jsx');
-const Meter = require('../meter/meter.jsx');
-const Waveform = require('../waveform/waveform.jsx');
+import PropTypes from 'prop-types';
+import React from 'react';
+import Box from '../box/box.jsx';
+import Meter from '../meter/meter.jsx';
+import Waveform from '../waveform/waveform.jsx';
 
-const styles = require('./record-modal.css');
-const stopIcon = require('./icon--stop-recording.svg');
+import styles from './record-modal.css';
+import stopIcon from './icon--stop-recording.svg';
 
 const RecordingStep = props => (
     <Box>

src/components/sprite-info/sprite-info.jsx

@@ -1,14 +1,14 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
 
-const Box = require('../box/box.jsx');
-const styles = require('./sprite-info.css');
+import Box from '../box/box.jsx';
+import styles from './sprite-info.css';
 
-const xIcon = require('./icon--x.svg');
-const yIcon = require('./icon--y.svg');
-const showIcon = require('./icon--show.svg');
-const hideIcon = require('./icon--hide.svg');
+import xIcon from './icon--x.svg';
+import yIcon from './icon--y.svg';
+import showIcon from './icon--show.svg';
+import hideIcon from './icon--hide.svg';
 
 const ROTATION_STYLES = ['left-right', 'don\'t rotate', 'all around'];
 

src/components/sprite-selector-item/sprite-selector-item.jsx

@@ -1,11 +1,11 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
 
-const Box = require('../box/box.jsx');
-const CostumeCanvas = require('../costume-canvas/costume-canvas.jsx');
-const CloseButton = require('../close-button/close-button.jsx');
-const styles = require('./sprite-selector-item.css');
+import Box from '../box/box.jsx';
+import CostumeCanvas from '../costume-canvas/costume-canvas.jsx';
+import CloseButton from '../close-button/close-button.jsx';
+import styles from './sprite-selector-item.css';
 
 const SpriteSelectorItem = props => (
     <Box

src/components/sprite-selector/sprite-selector.jsx

@@ -1,10 +1,10 @@
-const PropTypes = require('prop-types');
-const React = require('react');
+import PropTypes from 'prop-types';
+import React from 'react';
 
-const Box = require('../box/box.jsx');
-const SpriteInfo = require('../../containers/sprite-info.jsx');
-const SpriteSelectorItem = require('../../containers/sprite-selector-item.jsx');
-const styles = require('./sprite-selector.css');
+import Box from '../box/box.jsx';
+import SpriteInfo from '../../containers/sprite-info.jsx';
+import SpriteSelectorItem from '../../containers/sprite-selector-item.jsx';
+import styles from './sprite-selector.css';
 
 const SpriteSelectorComponent = function (props) {
     const {

src/components/stage-selector/stage-selector.jsx

@@ -1,10 +1,10 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
 
-const Box = require('../box/box.jsx');
-const CostumeCanvas = require('../costume-canvas/costume-canvas.jsx');
-const styles = require('./stage-selector.css');
+import Box from '../box/box.jsx';
+import CostumeCanvas from '../costume-canvas/costume-canvas.jsx';
+import styles from './stage-selector.css';
 
 const StageSelector = props => {
     const {

src/components/stage/stage.jsx

@@ -1,9 +1,9 @@
-const PropTypes = require('prop-types');
-const React = require('react');
+import PropTypes from 'prop-types';
+import React from 'react';
 
-const Box = require('../box/box.jsx');
-const MonitorList = require('../../containers/monitor-list.jsx');
-const styles = require('./stage.css');
+import Box from '../box/box.jsx';
+import MonitorList from '../../containers/monitor-list.jsx';
+import styles from './stage.css';
 
 const StageComponent = props => {
     const {

src/components/stop-all/stop-all.jsx

@@ -1,9 +1,9 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
 
-const stopAllIcon = require('./icon--stop-all.svg');
-const styles = require('./stop-all.css');
+import stopAllIcon from './icon--stop-all.svg';
+import styles from './stop-all.css';
 
 const StopAllComponent = function (props) {
     const {

src/components/target-pane/target-pane.jsx

@@ -1,19 +1,19 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
 
-const VM = require('scratch-vm');
+import VM from 'scratch-vm';
 
-const Box = require('../box/box.jsx');
-const BackdropLibrary = require('../../containers/backdrop-library.jsx');
-const CostumeLibrary = require('../../containers/costume-library.jsx');
-const SoundLibrary = require('../../containers/sound-library.jsx');
-const SpriteLibrary = require('../../containers/sprite-library.jsx');
-const SpriteSelectorComponent = require('../sprite-selector/sprite-selector.jsx');
-const StageSelector = require('../../containers/stage-selector.jsx');
+import Box from '../box/box.jsx';
+import BackdropLibrary from '../../containers/backdrop-library.jsx';
+import CostumeLibrary from '../../containers/costume-library.jsx';
+import SoundLibrary from '../../containers/sound-library.jsx';
+import SpriteLibrary from '../../containers/sprite-library.jsx';
+import SpriteSelectorComponent from '../sprite-selector/sprite-selector.jsx';
+import StageSelector from '../../containers/stage-selector.jsx';
 
-const styles = require('./target-pane.css');
-const addIcon = require('./icon--add.svg');
+import styles from './target-pane.css';
+import addIcon from './icon--add.svg';
 
 /*
  * Pane that contains the sprite selector, sprite info, stage selector,

src/components/waveform/waveform.jsx

@@ -1,6 +1,6 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const styles = require('./waveform.css');
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './waveform.css';
 
 const Waveform = props => {
     const {

src/containers/backdrop-library.jsx

@@ -1,10 +1,10 @@
-const bindAll = require('lodash.bindall');
-const PropTypes = require('prop-types');
-const React = require('react');
-const VM = require('scratch-vm');
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+import VM from 'scratch-vm';
 
-const backdropLibraryContent = require('../lib/libraries/backdrops.json');
-const LibraryComponent = require('../components/library/library.jsx');
+import backdropLibraryContent from '../lib/libraries/backdrops.json';
+import LibraryComponent from '../components/library/library.jsx';
 
 
 class BackdropLibrary extends React.Component {

src/containers/blocks.jsx

@@ -1,12 +1,12 @@
-const bindAll = require('lodash.bindall');
-const debounce = require('lodash.debounce');
-const defaultsDeep = require('lodash.defaultsdeep');
-const PropTypes = require('prop-types');
-const React = require('react');
-const VMScratchBlocks = require('../lib/blocks');
-const VM = require('scratch-vm');
-const Prompt = require('./prompt.jsx');
-const BlocksComponent = require('../components/blocks/blocks.jsx');
+import bindAll from 'lodash.bindall';
+import debounce from 'lodash.debounce';
+import defaultsDeep from 'lodash.defaultsdeep';
+import PropTypes from 'prop-types';
+import React from 'react';
+import VMScratchBlocks from '../lib/blocks';
+import VM from 'scratch-vm';
+import Prompt from './prompt.jsx';
+import BlocksComponent from '../components/blocks/blocks.jsx';
 
 const addFunctionListener = (object, property, callback) => {
     const oldFn = object[property];

src/containers/costume-library.jsx

@@ -1,10 +1,10 @@
-const bindAll = require('lodash.bindall');
-const PropTypes = require('prop-types');
-const React = require('react');
-const VM = require('scratch-vm');
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+import VM from 'scratch-vm';
 
-const costumeLibraryContent = require('../lib/libraries/costumes.json');
-const LibraryComponent = require('../components/library/library.jsx');
+import costumeLibraryContent from '../lib/libraries/costumes.json';
+import LibraryComponent from '../components/library/library.jsx';
 
 
 class CostumeLibrary extends React.PureComponent {

src/containers/costume-tab.jsx

@@ -1,14 +1,13 @@
-const PropTypes = require('prop-types');
-const React = require('react');
-const bindAll = require('lodash.bindall');
-const {defineMessages} = require('react-intl');
+import PropTypes from 'prop-types';
+import React from 'react';
+import bindAll from 'lodash.bindall';
+import {defineMessages} from 'react-intl';
+import VM from 'scratch-vm';
 
-const VM = require('scratch-vm');
+import AssetPanel from '../components/asset-panel/asset-panel.jsx';
+import addCostumeIcon from '../components/asset-panel/icon--add-costume-lib.svg';
 
-const AssetPanel = require('../components/asset-panel/asset-panel.jsx');
-const addCostumeIcon = require('../components/asset-panel/icon--add-costume-lib.svg');
-
-const {connect} = require('react-redux');
+import {connect} from 'react-redux';
 
 const {
     openCostumeLibrary,

src/containers/green-flag.jsx

@@ -1,10 +1,10 @@
-const bindAll = require('lodash.bindall');
-const PropTypes = require('prop-types');
-const React = require('react');
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
 
-const VM = require('scratch-vm');
+import VM from 'scratch-vm';
 
-const GreenFlagComponent = require('../components/green-flag/green-flag.jsx');
+import GreenFlagComponent from '../components/green-flag/green-flag.jsx';
 
 class GreenFlag extends React.Component {
     constructor (props) {

src/containers/gui.jsx

@@ -1,11 +1,11 @@
-const PropTypes = require('prop-types');
-const React = require('react');
-const VM = require('scratch-vm');
-const bindAll = require('lodash.bindall');
+import PropTypes from 'prop-types';
+import React from 'react';
+import VM from 'scratch-vm';
+import bindAll from 'lodash.bindall';
 
-const vmListenerHOC = require('../lib/vm-listener-hoc.jsx');
+import vmListenerHOC from '../lib/vm-listener-hoc.jsx';
 
-const GUIComponent = require('../components/gui/gui.jsx');
+import GUIComponent from '../components/gui/gui.jsx';
 
 class GUI extends React.Component {
     constructor (props) {

src/containers/load-button.jsx

@@ -1,9 +1,9 @@
-const bindAll = require('lodash.bindall');
-const PropTypes = require('prop-types');
-const React = require('react');
-const {connect} = require('react-redux');
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {connect} from 'react-redux';
 
-const LoadButtonComponent = require('../components/load-button/load-button.jsx');
+import LoadButtonComponent from '../components/load-button/load-button.jsx';
 
 class LoadButton extends React.Component {
     constructor (props) {

src/containers/monitor-list.jsx

@@ -1,9 +1,9 @@
-const bindAll = require('lodash.bindall');
-const React = require('react');
+import bindAll from 'lodash.bindall';
+import React from 'react';
 
-const {connect} = require('react-redux');
+import {connect} from 'react-redux';
 
-const MonitorListComponent = require('../components/monitor-list/monitor-list.jsx');
+import MonitorListComponent from '../components/monitor-list/monitor-list.jsx';
 
 class MonitorList extends React.Component {
     constructor (props) {

src/containers/monitor.jsx

@@ -1,9 +1,9 @@
-const bindAll = require('lodash.bindall');
-const React = require('react');
-const PropTypes = require('prop-types');
+import bindAll from 'lodash.bindall';
+import React from 'react';
+import PropTypes from 'prop-types';
 
-const monitorAdapter = require('../lib/monitor-adapter.js');
-const MonitorComponent = require('../components/monitor/monitor.jsx');
+import monitorAdapter from '../lib/monitor-adapter.js';
+import MonitorComponent from '../components/monitor/monitor.jsx';
 
 class Monitor extends React.Component {
     constructor (props) {

src/containers/playback-step.jsx

@@ -1,8 +1,8 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const bindAll = require('lodash.bindall');
-const PlaybackStepComponent = require('../components/record-modal/playback-step.jsx');
-const AudioBufferPlayer = require('../lib/audio/audio-buffer-player.js');
+import React from 'react';
+import PropTypes from 'prop-types';
+import bindAll from 'lodash.bindall';
+import PlaybackStepComponent from '../components/record-modal/playback-step.jsx';
+import AudioBufferPlayer from '../lib/audio/audio-buffer-player.js';
 
 class PlaybackStep extends React.Component {
     constructor (props) {

src/containers/prompt.jsx

@@ -1,7 +1,7 @@
-const PropTypes = require('prop-types');
-const React = require('react');
-const bindAll = require('lodash.bindall');
-const PromptComponent = require('../components/prompt/prompt.jsx');
+import PropTypes from 'prop-types';
+import React from 'react';
+import bindAll from 'lodash.bindall';
+import PromptComponent from '../components/prompt/prompt.jsx';
 
 class Prompt extends React.Component {
     constructor (props) {

src/containers/record-modal.jsx

@@ -1,11 +1,11 @@
-const bindAll = require('lodash.bindall');
-const PropTypes = require('prop-types');
-const React = require('react');
-const VM = require('scratch-vm');
-const WavEncoder = require('wav-encoder');
-const {connect} = require('react-redux');
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+import VM from 'scratch-vm';
+import WavEncoder from 'wav-encoder';
+import {connect} from 'react-redux';
 
-const RecordModalComponent = require('../components/record-modal/record-modal.jsx');
+import RecordModalComponent from '../components/record-modal/record-modal.jsx';
 
 const {
     closeSoundRecorder

src/containers/recording-step.jsx

@@ -1,7 +1,7 @@
-const React = require('react');
-const bindAll = require('lodash.bindall');
-const RecordingStepComponent = require('../components/record-modal/recording-step.jsx');
-const AudioRecorder = require('../lib/audio/audio-recorder.js');
+import React from 'react';
+import bindAll from 'lodash.bindall';
+import RecordingStepComponent from '../components/record-modal/recording-step.jsx';
+import AudioRecorder from '../lib/audio/audio-recorder.js';
 
 class RecordingStep extends React.Component {
     constructor (props) {

src/containers/save-button.jsx

@@ -1,9 +1,9 @@
-const bindAll = require('lodash.bindall');
-const PropTypes = require('prop-types');
-const React = require('react');
-const {connect} = require('react-redux');
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {connect} from 'react-redux';
 
-const ButtonComponent = require('../components/button/button.jsx');
+import ButtonComponent from '../components/button/button.jsx';
 
 class SaveButton extends React.Component {
     constructor (props) {

src/containers/sound-library.jsx

@@ -1,13 +1,13 @@
-const bindAll = require('lodash.bindall');
-const PropTypes = require('prop-types');
-const React = require('react');
-const VM = require('scratch-vm');
-const AudioEngine = require('scratch-audio');
-const LibraryComponent = require('../components/library/library.jsx');
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+import VM from 'scratch-vm';
+import AudioEngine from 'scratch-audio';
+import LibraryComponent from '../components/library/library.jsx';
 
-const soundIcon = require('../components/asset-panel/icon--sound.svg');
+import soundIcon from '../components/asset-panel/icon--sound.svg';
 
-const soundLibraryContent = require('../lib/libraries/sounds.json');
+import soundLibraryContent from '../lib/libraries/sounds.json';
 
 class SoundLibrary extends React.PureComponent {
     constructor (props) {

src/containers/sound-tab.jsx

@@ -1,18 +1,17 @@
-const PropTypes = require('prop-types');
-const React = require('react');
-const bindAll = require('lodash.bindall');
-const {defineMessages} = require('react-intl');
+import PropTypes from 'prop-types';
+import React from 'react';
+import bindAll from 'lodash.bindall';
+import {defineMessages} from 'react-intl';
+import VM from 'scratch-vm';
 
-const VM = require('scratch-vm');
+import AssetPanel from '../components/asset-panel/asset-panel.jsx';
+import soundIcon from '../components/asset-panel/icon--sound.svg';
+import addSoundFromLibraryIcon from '../components/asset-panel/icon--add-sound-lib.svg';
+import addSoundFromRecordingIcon from '../components/asset-panel/icon--add-sound-record.svg';
 
-const AssetPanel = require('../components/asset-panel/asset-panel.jsx');
-const soundIcon = require('../components/asset-panel/icon--sound.svg');
-const addSoundFromLibraryIcon = require('../components/asset-panel/icon--add-sound-lib.svg');
-const addSoundFromRecordingIcon = require('../components/asset-panel/icon--add-sound-record.svg');
+import RecordModal from './record-modal.jsx';
 
-const RecordModal = require('./record-modal.jsx');
-
-const {connect} = require('react-redux');
+import {connect} from 'react-redux';
 
 const {
     openSoundLibrary,

src/containers/sprite-info.jsx

@@ -1,8 +1,8 @@
-const bindAll = require('lodash.bindall');
-const PropTypes = require('prop-types');
-const React = require('react');
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
 
-const SpriteInfoComponent = require('../components/sprite-info/sprite-info.jsx');
+import SpriteInfoComponent from '../components/sprite-info/sprite-info.jsx';
 
 class SpriteInfo extends React.Component {
     constructor (props) {

src/containers/sprite-library.jsx

@@ -1,11 +1,11 @@
-const bindAll = require('lodash.bindall');
-const PropTypes = require('prop-types');
-const React = require('react');
-const VM = require('scratch-vm');
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+import VM from 'scratch-vm';
 
-const spriteLibraryContent = require('../lib/libraries/sprites.json');
+import spriteLibraryContent from '../lib/libraries/sprites.json';
 
-const LibraryComponent = require('../components/library/library.jsx');
+import LibraryComponent from '../components/library/library.jsx';
 
 class SpriteLibrary extends React.PureComponent {
     constructor (props) {

src/containers/sprite-selector-item.jsx

@@ -1,10 +1,10 @@
-const bindAll = require('lodash.bindall');
-const PropTypes = require('prop-types');
-const React = require('react');
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
 
-const {connect} = require('react-redux');
+import {connect} from 'react-redux';
 
-const SpriteSelectorItemComponent = require('../components/sprite-selector-item/sprite-selector-item.jsx');
+import SpriteSelectorItemComponent from '../components/sprite-selector-item/sprite-selector-item.jsx';
 
 class SpriteSelectorItem extends React.Component {
     constructor (props) {

src/containers/stage-selector.jsx

@@ -1,10 +1,10 @@
-const bindAll = require('lodash.bindall');
-const PropTypes = require('prop-types');
-const React = require('react');
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
 
-const {connect} = require('react-redux');
+import {connect} from 'react-redux';
 
-const StageSelectorComponent = require('../components/stage-selector/stage-selector.jsx');
+import StageSelectorComponent from '../components/stage-selector/stage-selector.jsx';
 
 class StageSelector extends React.Component {
     constructor (props) {

src/containers/stage.jsx

@@ -1,11 +1,11 @@
-const bindAll = require('lodash.bindall');
-const PropTypes = require('prop-types');
-const React = require('react');
-const Renderer = require('scratch-render');
-const AudioEngine = require('scratch-audio');
-const VM = require('scratch-vm');
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Renderer from 'scratch-render';
+import AudioEngine from 'scratch-audio';
+import VM from 'scratch-vm';
 
-const StageComponent = require('../components/stage/stage.jsx');
+import StageComponent from '../components/stage/stage.jsx';
 
 class Stage extends React.Component {
     constructor (props) {

src/containers/stop-all.jsx

@@ -1,9 +1,9 @@
-const bindAll = require('lodash.bindall');
-const PropTypes = require('prop-types');
-const React = require('react');
-const VM = require('scratch-vm');
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+import VM from 'scratch-vm';
 
-const StopAllComponent = require('../components/stop-all/stop-all.jsx');
+import StopAllComponent from '../components/stop-all/stop-all.jsx';
 
 class StopAll extends React.Component {
     constructor (props) {

src/containers/target-pane.jsx

@@ -1,7 +1,7 @@
-const bindAll = require('lodash.bindall');
-const React = require('react');
+import bindAll from 'lodash.bindall';
+import React from 'react';
 
-const {connect} = require('react-redux');
+import {connect} from 'react-redux';
 
 const {
     openBackdropLibrary,
@@ -12,7 +12,7 @@ const {
     closeSpriteLibrary
 } = require('../reducers/modals');
 
-const TargetPaneComponent = require('../components/target-pane/target-pane.jsx');
+import TargetPaneComponent from '../components/target-pane/target-pane.jsx';
 
 class TargetPane extends React.Component {
     constructor (props) {

src/index.jsx

@@ -1,16 +1,16 @@
-const React = require('react');
-const ReactDOM = require('react-dom');
-const {Provider} = require('react-redux');
-const {IntlProvider} = require('react-intl');
-const {createStore, applyMiddleware} = require('redux');
-const throttle = require('redux-throttle').default;
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Provider} from 'react-redux';
+import {createStore, applyMiddleware} from 'redux';
+import throttle from 'redux-throttle';
+import {IntlProvider} from 'react-intl';
 
-const GUI = require('./containers/gui.jsx');
-const log = require('./lib/log');
-const ProjectLoader = require('./lib/project-loader');
-const reducer = require('./reducers/gui');
+import GUI from './containers/gui.jsx';
+import log from './lib/log';
+import ProjectLoader from './lib/project-loader';
+import reducer from './reducers/gui';
 
-const styles = require('./index.css');
+import styles from './index.css';
 
 class App extends React.Component {
     constructor (props) {

src/lib/audio/audio-buffer-player.js

@@ -1,4 +1,4 @@
-const SharedAudioContext = require('./shared-audio-context.js');
+import SharedAudioContext from './shared-audio-context.js';
 
 class AudioBufferPlayer {
     constructor (samples) {

src/lib/audio/audio-recorder.js

@@ -1,4 +1,4 @@
-const SharedAudioContext = require('./shared-audio-context.js');
+import SharedAudioContext from './shared-audio-context.js';
 
 class AudioRecorder {
     constructor () {

src/lib/blocks.js

@@ -1,4 +1,4 @@
-const ScratchBlocks = require('scratch-blocks');
+import ScratchBlocks from 'scratch-blocks';
 
 module.exports = function (vm) {
 

src/lib/log.js

@@ -1,4 +1,4 @@
-const minilog = require('minilog');
+import minilog from 'minilog';
 minilog.enable();
 
 module.exports = minilog('gui');

src/lib/monitor-adapter.js

@@ -3,7 +3,7 @@
  * - Convert opcode to a label and a category
  * - Add missing XY position data if needed
  */
-const OpcodeLabels = require('./opcode-labels.js');
+import OpcodeLabels from './opcode-labels.js';
 
 const PADDING = 5;
 const MONITOR_HEIGHT = 23;

src/lib/project-loader.js

@@ -1,6 +1,6 @@
-const xhr = require('xhr');
+import xhr from 'xhr';
 
-const log = require('./log');
+import log from './log';
 
 class ProjectLoader {
     constructor () {

src/lib/storage.js

@@ -1,4 +1,4 @@
-const ScratchStorage = require('scratch-storage');
+import ScratchStorage from 'scratch-storage';
 
 const PROJECT_SERVER = 'https://cdn.projects.scratch.mit.edu';
 const ASSET_SERVER = 'https://cdn.assets.scratch.mit.edu';

src/lib/vm-listener-hoc.jsx

@@ -1,12 +1,12 @@
-const bindAll = require('lodash.bindall');
-const PropTypes = require('prop-types');
-const React = require('react');
-const VM = require('scratch-vm');
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+import VM from 'scratch-vm';
 
-const {connect} = require('react-redux');
+import {connect} from 'react-redux';
 
-const targets = require('../reducers/targets');
-const monitors = require('../reducers/monitors');
+import targets from '../reducers/targets';
+import monitors from '../reducers/monitors';
 
 /*
  * Higher Order Component to manage events emitted by the VM

src/reducers/gui.js

@@ -1,4 +1,4 @@
-const {combineReducers} = require('redux');
+import {combineReducers} from 'redux';
 
 module.exports = combineReducers({
     modals: require('./modals'),

src/reducers/monitors.js

@@ -1,5 +1,5 @@
 const UPDATE_MONITORS = 'scratch-gui/monitors/UPDATE_MONITORS';
-const {OrderedMap} = require('immutable');
+import {OrderedMap} from 'immutable';
 
 const initialState = OrderedMap();
 

src/reducers/vm.js

@@ -1,5 +1,5 @@
-const VM = require('scratch-vm');
-const Storage = require('../lib/storage');
+import VM from 'scratch-vm';
+import Storage from '../lib/storage';
 
 const SET_VM = 'scratch-gui/vm/SET_VM';
 const defaultVM = new VM();

webpack.config.js

@@ -36,7 +36,7 @@ module.exports = {
             include: path.resolve(__dirname, 'src'),
             options: {
                 plugins: ['transform-object-rest-spread'],
-                presets: [['es2015', {modules: false}], 'react']
+                presets: ['es2015', 'react']
             }
         },
         {