Electron 12 学习（二）Electron 12 安装与配置

野性酷女 2022-10-14 05:25 498阅读 0赞

1.  设置 electron 镜像：
    
        npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/
2.  全局安装 Electron 并测试：
    
        npm i -g electron
    
        C:\Users\xuxiaowei>npm i -g electron
        D:\Program Files\nodejs\node_global\electron -> D:\Program Files\nodejs\node_global\node_modules\electron\cli.js
        
        > electron@12.0.9 postinstall D:\Program Files\nodejs\node_global\node_modules\electron
        > node install.js
        
        + electron@12.0.9
        updated 3 packages in 8.465s
        
        C:\Users\xuxiaowei>
3.  测试启动 electron：
    
        C:\Users\xuxiaowei>electron
        
        
        Electron 12.0.9 - Build cross platform desktop apps with JavaScript, HTML, and CSS
        Usage: electron [options] [path]
        
        A path to an Electron app may be specified. It must be one of the following:
          - index.js file.
          - Folder containing a package.json file.
          - Folder containing an index.js file.
          - .html/.htm file.
          - http://, https://, or file:// URL.
        
        Options:
          -i, --interactive     Open a REPL to the main process.
          -r, --require         Module to preload (option can be repeated).
          -v, --version         Print the version.
          -a, --abi             Print the Node ABI version.
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70]
4.  创建 Node 项目：  
    [Electron 文档 创建基本应用程序][Electron _]
    
        mkdir electron-12-study
        cd electron-12-study
        npm init
    
        D:\WebstormProjects>mkdir electron-12-study
        
        D:\WebstormProjects>cd electron-12-study
        
        D:\WebstormProjects\electron-12-study>npm init
        This utility will walk you through creating a package.json file.
        It only covers the most common items, and tries to guess sensible defaults.
        
        See `npm help init` for definitive documentation on these fields
        and exactly what they do.
        
        Use `npm install <pkg>` afterwards to install a package and
        save it as a dependency in the package.json file.
        
        Press ^C at any time to quit.
        package name: (electron-12-study)
        version: (1.0.0)
        description: Electron 12 学习
        entry point: (index.js)
        test command:
        git repository: https://github.com/xuxiaowei-com-cn/Electron-12-Study.git
        keywords: electron
        author: 徐晓伟 <xuxiaowei@xuxiaowei.com.cn>
        license: (ISC) MIT
        About to write to D:\WebstormProjects\electron-12-study\package.json:
        
        {
          "name": "electron-12-study",
          "version": "1.0.0",
          "description": "Electron 12 学习",
          "main": "index.js",
          "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1"
          },
          "repository": {
            "type": "git",
            "url": "git+https://github.com/xuxiaowei-com-cn/Electron-12-Study.git"
          },
          "keywords": [
            "electron"
          ],
          "author": "徐晓伟 <xuxiaowei@xuxiaowei.com.cn>",
          "license": "MIT",
          "bugs": {
            "url": "https://github.com/xuxiaowei-com-cn/Electron-12-Study/issues"
          },
          "homepage": "https://github.com/xuxiaowei-com-cn/Electron-12-Study#readme"
        }
        
        
        Is this OK? (yes)
        
        D:\WebstormProjects\electron-12-study>
5.  创建项目内容如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 1]
6.  添加版本控制：  
    [GitHub 地址][GitHub]  
    [CodeChina 地址][CodeChina]  
    [Gitee 地址][Gitee]  
    已上版本控制地址将同步推送  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 2]
7.  安装 electron：  
    [Electron 文档 - 安装-electron][Electron _ - _-electron]
    
        npm i -D electron
    
        Microsoft Windows [版本 10.0.19042.985]
        (c) Microsoft Corporation。保留所有权利。
        
        D:\WebstormProjects\electron-12-study>npm i -D electron
        
        > core-js@3.12.1 postinstall D:\WebstormProjects\electron-12-study\node_modules\core-js
        > node -e "try{require('./postinstall')}catch(e){}"
        
        Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
        
        The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
        > https://opencollective.com/core-js 
        > https://www.patreon.com/zloirock 
        
        Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
        
        
        > electron@12.0.9 postinstall D:\WebstormProjects\electron-12-study\node_modules\electron
        > node install.js
        
        npm notice created a lockfile as package-lock.json. You should commit this file.
        + electron@12.0.9
        added 87 packages from 96 contributors in 18.751s
        
        6 packages are looking for funding
          run `npm fund` for details
        
        
        D:\WebstormProjects\electron-12-study>
8.  创建主脚本文件：  
    [Electron 文档 - 创建主脚本文件][Electron _ -]
    
        const { app, BrowserWindow } = require('electron')
        const path = require('path')
        
        function createWindow () {
            const win = new BrowserWindow({
                width: 800,
                height: 600,
                webPreferences: {
                    preload: path.join(__dirname, 'preload.js')
                }
            })
        
            win.loadFile('index.html')
        }
        
        app.whenReady().then(() => {
            createWindow()
        
            app.on('activate', () => {
                if (BrowserWindow.getAllWindows().length === 0) {
                    createWindow()
                }
            })
        })
        
        app.on('window-all-closed', () => {
            if (process.platform !== 'darwin') {
                app.quit()
            }
        })
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 3]
9.  创建网页：  
    [Electron 文档 - 创建网页][Electron _ - 1]
    
        <!DOCTYPE html>
        <html lang="zh">
        <head>
            <meta charset="UTF-8">
            <title>Hello World!</title>
            <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>
        </head>
        <body style="background: white;">
        <h1>Hello World!</h1>
        <p>
            We are using Node.js <span id="node-version"></span>,
            Chromium <span id="chrome-version"></span>,
            and Electron <span id="electron-version"></span>.
        </p>
        </body>
        </html>
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 4]
10. 定义一个预加载脚本：  
    [Electron 文档 - 定义一个预加载脚本][Electron _ - 2]
    
        window.addEventListener('DOMContentLoaded', () => { 
          const replaceText = (selector, text) => { 
            const element = document.getElementById(selector)
            if (element) element.innerText = text
          }
        
          for (const type of ['chrome', 'node', 'electron']) { 
            replaceText(`${ type}-version`, process.versions[type])
          }
        })
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 5]
11. 修改您的-packagejson-文件  
    [Electron 文档 - 修改您的-packagejson-文件][Electron _ - _-packagejson-]
    
        "start": "electron .",
    
        {
          "name": "electron-12-study",
          "version": "1.0.0",
          "description": "Electron 12 学习",
          "main": "index.js",
          "scripts": {
            "start": "electron .",
            "test": "echo \"Error: no test specified\" && exit 1"
          },
          "repository": {
            "type": "git",
            "url": "git+https://github.com/xuxiaowei-com-cn/Electron-12-Study.git"
          },
          "keywords": [
            "electron"
          ],
          "author": "徐晓伟 <xuxiaowei@xuxiaowei.com.cn>",
          "license": "MIT",
          "bugs": {
            "url": "https://github.com/xuxiaowei-com-cn/Electron-12-Study/issues"
          },
          "homepage": "https://github.com/xuxiaowei-com-cn/Electron-12-Study#readme",
          "devDependencies": {
            "electron": "^12.0.9"
          }
        }
12. 启动项目：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 6]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 7]
13. 源码：  
    [GitHub][GitHub 1]  
    [Gitee][Gitee 1]  
    [CodeChina][CodeChina 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70]: /images/20221014/882fb2341f9f43359a45d07de55f8d92.png
[Electron _]: https://www.electronjs.org/docs/tutorial/quick-start#%E5%88%9B%E5%BB%BA%E5%9F%BA%E6%9C%AC%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 1]: /images/20221014/d9de69afac1242c5bf0bc38d507ddaa9.png
[GitHub]: https://github.com/xuxiaowei-com-cn/Electron-12-Study
[CodeChina]: https://codechina.csdn.net/xuxiaowei-com-cn/Electron-12-Study
[Gitee]: https://gitee.com/xuxiaowei-com-cn/Electron-12-Study
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 2]: /images/20221014/f4d88ff63138451e8c73a049f3194dcc.png
[Electron _ - _-electron]: https://www.electronjs.org/docs/tutorial/quick-start#%E5%AE%89%E8%A3%85-electron
[Electron _ -]: https://www.electronjs.org/docs/tutorial/quick-start#%E5%88%9B%E5%BB%BA%E4%B8%BB%E8%84%9A%E6%9C%AC%E6%96%87%E4%BB%B6
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 3]: /images/20221014/90215e253a4e49c0aef5fd727f686551.png
[Electron _ - 1]: https://www.electronjs.org/docs/tutorial/quick-start#%E5%88%9B%E5%BB%BA%E7%BD%91%E9%A1%B5
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 4]: /images/20221014/76580a13ca544bf2869c2f0e851d40c1.png
[Electron _ - 2]: https://www.electronjs.org/docs/tutorial/quick-start#%E5%AE%9A%E4%B9%89%E4%B8%80%E4%B8%AA%E9%A2%84%E5%8A%A0%E8%BD%BD%E8%84%9A%E6%9C%AC
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 5]: /images/20221014/fa3b3d6a0436446197acd17344707703.png
[Electron _ - _-packagejson-]: https://www.electronjs.org/docs/tutorial/quick-start#%E4%BF%AE%E6%94%B9%E6%82%A8%E7%9A%84-packagejson-%E6%96%87%E4%BB%B6
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 6]: /images/20221014/479350ace6ca4cf8b7a34eaad51a1acc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 7]: /images/20221014/6aedc7009b6246308394c2ae69e5bbce.png
[GitHub 1]: https://github.com/xuxiaowei-com-cn/Electron-12-Study/tree/Electron_12_%E5%AD%A6%E4%B9%A0%EF%BC%88%E4%BA%8C%EF%BC%89Electron_12_%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE
[Gitee 1]: https://gitee.com/xuxiaowei-com-cn/Electron-12-Study/tree/Electron_12_%E5%AD%A6%E4%B9%A0%EF%BC%88%E4%BA%8C%EF%BC%89Electron_12_%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE
[CodeChina 1]: https://codechina.csdn.net/xuxiaowei-com-cn/Electron-12-Study/-/tree/Electron_12_%E5%AD%A6%E4%B9%A0%EF%BC%88%E4%BA%8C%EF%BC%89Electron_12_%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE