Question

我在我的反应应用程序中使用带有webpack的babel。 PFB样品反应组分结构

Checkbox.js

import React from 'react';
import ClassNames from 'classnames';
import Check from './Check';

class Checkbox extends React.Component {
  render() {
    return (
      ...
      <Check {...myprops} />
      ...
    );
  }
}

Check.js

import React from 'react';
import ClassNames from 'classnames';

class Check extends React.Component {
  render() {
    return (
      ...
      <div data-role='checkbox' onMouseDown={onMouseDown} className={className}>{children}</div>
      ...
    );
  }
}

由babel完成后的PFB样本转换数据

var _react = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
var _classnames = __webpack_require__(327);
var _classnames2 = _interopRequireDefault(_classnames);
var _check = __webpack_require__(328);
var _check2 = _interopRequireDefault(_check);
var Checkbox = (function (_React$Component) {
  _inherits(TextBox, _React$Component);
  ...
  ...
}
var _react = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
var _classnames = __webpack_require__(327);
var _classnames2 = _interopRequireDefault(_classnames);
var Check = (function (_React$Component) {
  _inherits(TextBox, _React$Component);
  ...
  ...
}

我可以看到每个组件的两个变量声明＆＃39;反应＆＃39;和＆＃39;类名＃39;我知道，两个文件都使用了相同的文件。但是，无论如何都要避免在转换后重复变量声明？

使用babel-loader跳过多个反应进口

0 个答案: