electron 打包js_Electron JS简介

electron 打包js

To better understand this article, you should have some basic knowledge of vanilla JavaScript and/or Node.Js.

为了更好地理解本文，您应该具有香草JavaScript和/或Node.Js的一些基本知识。

Note: Ensure you have Node.Js installed before proceeding with the environment set up for Electron JS.

注意：在继续为Electron JS设置环境之前，请确保已安装Node.Js。

什么是Electron JS？ (What is Electron JS?)

Electron JS (electronjs.org) is an open-source framework that enables the use of web technologies (HTML, CSS, and JavaScript) to create native desktop applications or software for Windows, Mac, and Linux platforms.

Electron JS ( electronjs.org )是一个开放源代码框架，该框架允许使用Web技术( HTML ， CSS和JavaScript )创建适用于Windows，Mac和Linux平台的本地桌面应用程序或软件。

It was previously called native shell and it is owned by GitHub.

它以前被称为本机外壳 ，并由GitHub拥有。

Electron JS uses web pages as its graphical user interface. Electron JS is very important because it solves the following progress,

Electron JS使用网页作为其图形用户界面。 Electron JS非常重要，因为它解决了以下问题，

It saves the time to learn a different programming language out of JavaScript stack like C# or Java to build native desktop applications.
它节省了从JavaScript堆栈(如C＃或Java)中学习其他编程语言以构建本机桌面应用程序的时间。
Electron JS applications also have access to native platform features like accessing the file system, creating a native menu, global shortcuts, and is equally offline by default.
Electron JS应用程序还可以访问本机平台功能，例如访问文件系统，创建本机菜单，全局快捷方式，并且默认情况下处于离线状态。

Just like a Node.Js app, Electron JS apps use package.json file as a starting point when development is concerned.

就像Node.Js应用程序一样，Electron JS应用程序将package.json文件用作开发方面的起点。

Examples of software built with Electron JS framework include: VS code, atom, and postman.

使用Electron JS框架构建的软件示例包括： VS代码 ， atom和postman 。

入门 (Getting Started)

To get started with the Electron JS, open a command line to your project's folder or directory and run the following command: npm install electron - -save-dev

要开始使用Electron JS ，请在项目的文件夹或目录中打开命令行，然后运行以下命令： npm install electro--save-dev

This command will create a node_modules folder in your project's directory.

此命令将在项目目录中创建一个node_modules文件夹。

Wait for a while as it installs successfully!. Make sure you have an internet connection when executing the command.

等待一段时间，因为它成功安装！执行命令时，请确保您具有Internet连接。

After successful installation, edit your package.json file and set it up as seen below;

成功安装后，编辑package.json文件并按如下所示进行设置；

If you don't find a package.json file in your project's directory, run the command npm init in that same directory.
如果在项目目录中找不到package.json文件，请在同一目录中运行命令npm init 。
From the package.json, notice the main value and the start value which represents the source code file and the start command (Electron .) respectively.
从的package.json，分别通知主值和表示的源代码文件和开始命令开始值( 电子)。
Also notice we decided to put the main file in the src folder just for a clean folder structure.
还要注意，我们决定将主文件放在src文件夹中，只是为了获得一个干净的文件夹结构。
Finally, open that same directory in a command-line terminal and run the command npm install to install all dependencies. This command also requires an internet connection.
最后，在命令行终端中打开同一目录，然后运行命令npm install安装所有依赖项。此命令还需要Internet连接。

So that's it friends. We're now ready to run a demo code to ensure everything worked.

就是朋友。现在，我们准备运行演示代码，以确保一切正常。

const electron = require ('electron')

const app = electron.app // electron module
const BrowserWindow = electron.BrowserWindow //enables UI
let mainWindow
app.on ('ready', _ => {
    mainWindow = new BrowserWindow({
        height : 400,
        width : 400
    })

    mainWindow.loadURL (`file://${__dirname}/index.html`)

    mainWindow.on ('closed', _ => { //detect if window is closed.
        console.log ('closed!')
        mainWindow = null
    })

})

Write a simple index.html file and save it in the src folder.
编写一个简单的index.html文件，并将其保存在src文件夹中。
Open the directory in a command-line terminal, then run the code npm start
在命令行终端中打开目录，然后运行代码npm start
Finally, take a cup of coffee and watch the electron magic. Ha Ha Ha!
最后，喝杯咖啡，观看电子魔术。哈哈哈！