electron + react 刨坑记

本贴最后更新于 775 天前,其中的信息可能已经时移世改

记录作为新手主要遇到的问题以及解决方案。

1.require is not defined

按照教程 react electron 搭建 桌面应用(Window)一步一个脚印来,其中有一个关键点:

// 修改 public/index.html,目的是在react中使用electron模块
<script>require('./render.js')</script>
<div id="root"></div>

作为新手在 react 中使用‘electron’,看到 console 中错误:

(index):28 Uncaught ReferenceError: require is not defined
    at (index):28

情真意切的以为这真是一个错误,但事实上它能正常工作。没错,It`s worked!!!。你不管他也就没事了。但是,如果想解决可以使用另一种 js 的导入方式:

<script src="./preload.js"></script>

然而,又是一个错误 preload.js:1 Uncaught ReferenceError: global is not defined,其实有时候也报 '<'解析异常,真是让人惆怅。接着,你得加上 type="text/babel",看起来是这么一回事:

<script type="text/babel" src="./preload.js"></script>

没有爆红应该能让人比较好接受。

作为提示,在 react 使用了 electron(比如,const { remote } = window.electron;),那么意味着启动 react 的时候弹出的网页是不能正常使用了的。只需在 package.jsonscripts 节点下添加 "electron-start": "electron ." // 配置electron启动,然后命令行 npm run electron-startyarn electron-start(yarn 在安装模块的时候下载速度较快哦)启动 electron,就好了(,曾今天真的以为在浏览器调试就好了,不用启动 electron。too young,too naive. )。好了,进行下一步工作吧。

  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    171 引用 • 267 回帖 • 553 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 128 回帖 • 1 关注

广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...