在 Rollup 构建的 Electron 应用中导入 Ramda 会导致错误答案

【问题标题】：Importing Ramda in Electron app builded by Rollup leads to error在 Rollup 构建的 Electron 应用中导入 Ramda 会导致错误
【发布时间】：2019-11-29 17:23:56
【问题描述】：

我正在尝试使用这样的堆栈创建一个简单的应用程序（来自 package.json 的带有 lib 版本的 sn-p）：

"electron": "^5.0.6"
"ramda": "^0.26.1"
"rollup": "^1.17.0",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.0.1",
"rollup-plugin-copy-glob": "^0.3.0",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-svelte": "^5.1.0",
"svelte": "^3.6.7"

偶然发现导入 ramda 库的问题：问题是如果我在电子应用程序的渲染器和主进程中都导入 ramda，我会收到以下错误：

Error: Cannot find module './chunk-ae261ffc.js'
Require stack:
- <path>/index.html
    at Module._resolveFilename (internal/modules/cjs/loader.js:659:15)
    at Function.Module._resolveFilename (<path>/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/common/reset-search-paths.js:43:12)
    at Function.Module._load (internal/modules/cjs/loader.js:577:27)
    at Module.require (internal/modules/cjs/loader.js:715:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at <path>/dist/renderer.js:3:18

我的汇总配置如下：

export default [
    {
        input: ['src/entries/main.js', 'src/entries/renderer.js'],
        output: {
            dir: 'dist',
            format: 'cjs',
            sourcemap: true
        },
        plugins: [
            svelte({
                css: css => {
                    css.write('dist/svelte.css');
                }
            }),
            resolve(),
            commonjs()
        ],
        external: ['electron', 'child_process', 'fs', 'path', 'url', 'module', 'os']
    }
];

我在渲染器进程（App.svelte 组件）的根组件中使用 ramda：

<script>
    import * as R from 'ramda';

    const q = R.always('hello from svelte');
</script>
{q()}

并在主进程的入口文件内：

import * as R from 'ramda';

最奇怪的事情（就我而言）是，如果我在上面评论任何 ramda 的导入，则不会引发错误。否则，我会收到我在此问题开头描述的错误

更新

在@ScottSauyet 的帮助下，很明显它可以通过将import 替换为require 来工作。但我认为这不是一个合适的解决方案（应该更改汇总配置，恕我直言）。

【问题讨论】：

如果你这样做import {always, ...} from 'ramda'，这会消失吗？我知道有些人会遇到类似的捆绑问题。
@ScottSauyet，不幸的是，它没有帮助。但是......它似乎正在使用require
我很惊讶地看到你的 html 中的 import 语句完全有效（即<script>import * as R from 'ramda'</script>。看看这个question；我建议在你的渲染器脚本也是如此。
@customcommander，感谢您的回复和问题的链接，但我想这与 html 中的 import 或 require 用法无关，因为这段代码 sn-p 放在 .svelte 组件中转译为 JS。我将更新问题以消除这种歧义
@user1820686 try this。它可以在我的系统上找到。

标签： javascript electron ramda.js rollupjs svelte

【解决方案1】：

首先，我非常感谢@CliteTailor 的努力。总的来说，这个答案是基于他的支持。

问题出在我没有复制到原始问题的 sn-p 中。我将我的index.html 文件留在根文件夹中（它正在渲染器进程中使用）'原样' - 没有将它与其他编译代码一起复制到dist 文件夹中，而是使用了指向该文件的链接：

<html>
    <!-- some header -->
    <body>
        <script src='./dist/renderer.js></script>
    </body>
</html>

根据@CliteTailor 的代码，我只是做了一些更改：

1) 将index.html 添加到rollup.config.js 中的dist 文件夹中：

export default [
    {
        input: ['src/entries/main.js', 'src/entries/renderer.js'],
        output: {
            dir: 'dist',
            format: 'cjs',
            sourcemap: true
        },
        plugins: [
            svelte({
                css: css => {
                    css.write('dist/svelte.css');
                }
            }),
            resolve(),
            commonjs(),
            copy({
                targets: [{ src: 'index.html', dest: 'dist' }]
            })
        ],
        external: ['electron', 'child_process', 'fs', 'path', 'url', 'module', 'os']
    }
];

2) 替换了从渲染器进程的主文件调用这个index.html：

// old code
win.loadFile(path.resolve(__dirname, '../index.html'));
// fixed code
win.loadFile(path.resolve(__dirname, 'index.html'));

3) 更改了index.html 中已编译渲染器文件的链接：

<html>
    <!-- some header -->
    <body>
        <script src='./renderer.js></script>
    </body>
</html>

现在一切正常。

【讨论】：