当有 CommonJS 而不是 ES6 模块时无法构建应用 exports/imports

Question

我通过 create-react-app（v3.3.0 的价值）生成了一个简单的应用程序，没有弄乱它的默认设置。

在大多数情况下，我使用 ES6 语法进行导出：

export default myStuff

// Or

export const myStuff = ()=>{}

但是，我希望我的脚本之一也能在节点的 CLI 中运行。因此，一些 select 文件使用 commonJS 语法：

module.exports = myStuff

这一切都很好，直到我决定构建和部署应用程序，然后抱怨说如果我使用 commonJS 语法 myStuff 没有被导入，我得到的错误正是：

Creating an optimized production build... Failed to compile. Attempted import error: 'myStuff' is not exported from './myStuff'.

我应该指出，构建和开发脚本保留了 create-react-app 生成的任何内容。准确地说：

...
  "dev": "react-scripts start",
  "build": "react-scripts build",
...

请记住，当运行在本地浏览器和使用 Node CLI 时，一切都完美无缺。我错过了什么？我如何使用现有的 CommonJS 文件进行构建？

编辑：为了澄清@JustRaman 提出的问题，我在客户端应用程序中对这些导出的使用从位于同一文件夹中的 index.js 文件开始。可以这样想：

├── ...
├── lib
│   ├── myCommonJSStuff.js
│   ├── myOtherCommonJSStuff.js
│   ├── myEs6Stuff.js
│   └──  index.js

来自 myCommonJSStuff.js 我按如下方式导出：

function myCommonJSStuff () { /* Do Stuff*/ }
module.exports = {
  myCommonJSStuff,
  someOtherIrrelevantFunction
}

从 myOtherCommonJSStuff.js 开始，它将只是一个默认的等效导出：

module.exports = function myOtherCommonJSStuff() { /*Do more stuff*/ }

myEs6Stuff.js顾名思义，我使用ES6语法：

export default function myEs6Stuff () { /*More stuff*/ }

最后，index.js 我重新导出所有内容，以便我可以从我的 lib/ 文件夹中导入它：

import { myCommonJSStuff } from './myCommonJSStuff'
import myOtherCommonJSStuff from './myOtherCommonJSStuff'
import myEs6Stuff from './myEs6Stuff'

export {
  myCommonJSStuff,
  myOtherCommonJSStuff,
  myEs6Stuff
}

Answer 1

我发现了一个类似的问题https://github.com/facebook/create-react-app/issues/6163似乎除了弹出没有简单的解决方案。

如果不想弹出 CRA，可以使用 https://www.npmjs.com/package/react-app-rewired。
另一个解决方案可以是一个模块加载器来加载 Node 中的 ESM 文件https://www.npmjs.com/package/esm这个包可以提供帮助。

当有 CommonJS 而不是 ES6 模块时无法构建应用 exports/imports

Cannot build an app when there is CommonJS instead of ES6 module exports/imports

javascript

node.js

ecmascript-6

create-react-app

commonjs