如何使用babel正确地转译react模块以及如何正确处理导入

Question

我认为我在转译的index.js文件中重新声明了导入问题

我正在将一些React es6组件转换为一个index.js文件。然后通过运行“ npm install / path / to / myComponents”将这些组件导入到另一个项目中

将这些组件导入主项目时，出现错误

<platform name="android">
    <splash density="hdpi" src="res/screen/android/screen-hdpi-landscape.png" />
    <splash density="port-hdpi" src="res/screen/android/screen-hdpi-portrait.png" />
    <splash density="ldpi" src="res/screen/android/screen-ldpi-landscape.png" />
    <splash density="port-ldpi" src="res/screen/android/screen-ldpi-portrait.png" />
    <splash density="mdpi" src="res/screen/android/screen-mdpi-landscape.png" />
    <splash density="port-mdpi" src="res/screen/android/screen-mdpi-portrait.png" />
    <splash density="xhdpi" src="res/screen/android/screen-xhdpi-landscape.png" />
    <splash density="port-xhdpi" src="res/screen/android/screen-xhdpi-portrait.png" />
</platform>

这行代码确实在我的index.js中多次显示，看起来像这样的代码

SyntaxError: Identifier '_interopRequireDefault' has already been declared
...
> 53 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
...

我想修正代码的转译方式，以免发生这种情况，或者我只是忽略了重新声明，无论如何它们都是一样的。

我的react组件所在的src文件夹包含一个index.js文件和一个其中包含3个Components的components文件夹。每个组件都包含

var _react = _interopRequireDefault(require("react"));

var _componentX = require("./ComponentX.js");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _this = void 0;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var ComponentY = function ComponentY(props) {

其中有两个导入了第三个组件

---

可能的解决方案

我很确定解决方案涉及更改“ build”行中的某些内容：import React from 'react'; import propTypes from 'prop-types' 但我不知道该怎么做。

这些是我的Components文件夹中的文件，而不是我的主项目文件夹（该文件导入了components文件夹）。

---

.babelrc

"./node_modules/.bin/babel src --out-file index.js".

package.json

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  ]
}

webpack.config.js

{
    "name": "myComponent",
    "version": "1.0.0",
    "scripts": {
        "build": "./node_modules/.bin/babel src --out-file index.js"
    },
    "dependencies": {},
    "peerDependencies": {
        "react": "^16.6.1",
        "react-dom": "^16.6.3"
    },
    "devDependencies": {
        "@babel/cli": "^7.5.5",
        "@babel/core": "^7.5.5",
        "@babel/plugin-proposal-class-properties": "^7.5.5",
        "@babel/preset-env": "^7.5.5",
        "@babel/preset-react": "^7.0.0",
        "react": "^16.8.6",
        "react-dom": "^16.8.6"
    }
}