react+webpack+electron构建桌面应用 && ReferenceError: document is not defined

一、需求

 写了一个react项目已经使用了webpack打包，想再结合electron构建一个桌面应用。

二、具体实现

1.下载electron（一定要确保下载成功--package.json中会添加electron的相关信息）

    命令：

npm install electron

2.在原有项目的根目录下 添加  man.js  文件书写electron相关的内容。

 具体代码如下：

const { app, BrowserWindow } = require("electron");
const path = require("path");

function createWindow() {
    const win = new BrowserWindow({
        width: 1200,
        height: 800,
        backgroundColor: "#fff",

        webPreferences: {
            nodeIntegration: false,
            worldSafeExecuteJavaScript: true,
            contextIsolation: true,
        }
    });
    win.loadURL(path.join(__dirname, "./dist/index.html"));


}

app.on("ready", createWindow);

上述代码中：

win.loadURL(path.join(__dirname, "./dist/index.html")); 路径是你用webpack打包好生成的 index.html文件所在的路径

​​​​​​3.修改package.json文件:配置启动electron的命令，“main"的入口处理地址。

 具体代码如下：

{
    "name": "animation",
    "version": "1.0.0",
    "description": "",
    "main": "./dist/js/main.js",
    "scripts": {
        "watch": "webpack --config webpack.config.js --watch",
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "electron ."
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.13.10",
        "@babel/plugin-proposal-class-properties": "^7.13.0",
        "@babel/plugin-transform-runtime": "^7.13.10",
        "@babel/preset-env": "^7.13.10",
        "@babel/preset-react": "^7.12.13",
        "babel-loader": "^8.2.2",
        "css-loader": "^5.1.2",
        "electron": "^13.0.1",
        "file-loader": "^6.2.0",
        "html-loader": "^2.1.2",
        "html-webpack-plugin": "^5.3.1",
        "less": "^4.1.1",
        "less-loader": "^8.0.0",
        "node-sass": "^5.0.0",
        "sass-loader": "^11.0.1",
        "style-loader": "^2.0.0",
        "url-loader": "^4.1.1",
        "webpack": "^5.25.1",
        "webpack-cli": "^4.5.0",
        "webpack-dev-server": "^3.11.2"
    },
    "dependencies": {
        "antd": "^4.14.0",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-router-dom": "^5.2.0",
        "react-syntax-highlighter": "^15.4.3"
    }
}

 

4.重新打包项目

命令：

webpack

5.启动项目

命令：（在package.json中已经配置过）

npm start

 

好了，到此为止，就是在react+webpack项目中使用electron构建桌面应用的全部过程。

三、问题

新手，所以遇到的问题也比较多。下面详细将解决时间最长的问题。

最后一步 npm start启动项目时，报了一个很奇怪的错误，百度了很久都不知道问题所在。

1.具体错误 

    

App threw an error during load
ReferenceError: document is not defined
    at insertStyleElement (webpack-internal:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js:93:15)
    at addStyle (webpack-internal:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js:208:13)
    at modulesToDom (webpack-internal:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js:81:18)
    at module.exports (webpack-internal:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js:239:25)
    at eval (webpack-internal:///./node_modules/antd/dist/antd.css:16:107)
    at Object../node_modules/antd/dist/antd.css (F:\reactLearning2\animation\dist\js\main.js:5979:1)
    at __webpack_require__ (F:\reactLearning2\animation\dist\js\main.js:6251:41)       
    at eval (webpack-internal:///./App.jsx:15:76)
    at Object../App.jsx (F:\reactLearning2\animation\dist\js\main.js:1349:1)
    at __webpack_require__ (F:\reactLearning2\animation\dist\js\main.js:6251:41)       

我以为上面的关键是 ‘document is not defined',然而并没有从这里找到答案；甚至怀疑是我使用的样式文件与electron的样式文件冲突，但是改了名字后依然报错。

反复检查后，终于发现错误的根本原因。

2.根本原因

1)我把webpack打包出的main.js文件和electron桌面应用的入口文件 mian.js混淆了。

   webpack打包出的main.js文件是 应用的逻辑处理（js、less、图片、文件）的入口文件，在加载index.html文件后才调用的js文件

   electron桌面应用的main.js文件：是整个应用的入口文件，应用一运行首先调用的文件

2)所以package.json的"main"入口中的路径 应该是   electron桌面应用的入口文件 main.js (具体实现中第二个步骤中新添加的文件）所在的路径

{

    "name": "animation",

    "version": "1.0.0",

    "description": "",

    "main": "./main.js",

    "scripts": {

        "watch": "webpack --config webpack.config.js --watch",

        "test": "echo \"Error: no test specified\" && exit 1",

        "start": "electron ."

    },

    "keywords": [],

    "author": "",

    "license": "ISC",

    "devDependencies": {

        "@babel/core": "^7.13.10",

        "@babel/plugin-proposal-class-properties": "^7.13.0",

        "@babel/plugin-transform-runtime": "^7.13.10",

        "@babel/preset-env": "^7.13.10",

        "@babel/preset-react": "^7.12.13",

        "babel-loader": "^8.2.2",

        "css-loader": "^5.1.2",

        "electron": "^13.0.1",

        "file-loader": "^6.2.0",

        "html-loader": "^2.1.2",

        "html-webpack-plugin": "^5.3.1",

        "less": "^4.1.1",

        "less-loader": "^8.0.0",

        "node-sass": "^5.0.0",

        "sass-loader": "^11.0.1",

        "style-loader": "^2.0.0",

        "url-loader": "^4.1.1",

        "webpack": "^5.25.1",

        "webpack-cli": "^4.5.0",

        "webpack-dev-server": "^3.11.2"

    },

    "dependencies": {

        "antd": "^4.14.0",

        "react": "^17.0.1",

        "react-dom": "^17.0.1",

        "react-router-dom": "^5.2.0",

        "react-syntax-highlighter": "^15.4.3"

    }

}

3)修改package.json文件后，项目成功启动

四、总结

1.在艰难的摸索之中知道了react+webpack项目如何变成   桌面应用 ，详见本文第二章：二、具体实现

2.报错“document is not defined"很有可能是路径写错了。在electron中报此错误应该仔细检查  package.json文件的 "main"属性值 是否正确

 

 

如有错误，欢迎指正！

希望对你有帮助！