构建 Snowpack + React + Typescript + Electron的Desktop App

Atom和VSCode都是基于Electron开发的项目，在好奇心的催动下，我就组合了一个简单的Electron + Snowpack的框架。

简介

Electron
Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。通过将Chromium和Node.js嵌入其二进制文件中，Electron 允许您维护一个 JavaScript 代码库并创建可在 Windows、macOS 和 Linux 上运行的跨平台应用程序——无需本地开发经验。

目前据Github统计已有20多万个项目使用中，并且由于它很好的兼容HTML+JS+CSS的前端开发，也使得许多的项目极为方便的从B/S架构移植到C/S架构，从而减小了Desktop开发者的学习曲线（规避了Qt和Gtk的学习）。

React
React（有时叫React.js或ReactJS），是一个为数据提供渲染为HTML视图的开源JavaScript 库。React视图通常采用包含以自定义HTML标记规定的其他组件的组件渲染。React为程序员提供了一种子组件不能直接影响外层组件（“data flows down”）的模型，数据改变时对HTML文档的有效更新，和现代单页应用中组件之间干净的分离。

它由Facebook、Instagram和一个由个人开发者和企业组成的社群维护。根据JavaScript分析服务Libscore，React目前正在被Netflix、Imgur、Bleacher Report、Feedly、Airbnb、SeatGeek、HelloSign等很多网站的主页使用。

Typescript
TypeScript是一种开源的编程语言，该语言项目由微软进行维护和管理。TypeScript不仅包含JavaScript的语法，而且还提供了静态类型检查以及使用看起来像基于类的面向对象编程语法操作Prototype。C#的首席架构师以及Delphi和Turbo Pascal的创始人安德斯·海尔斯伯格参与了TypeScript的开发。

TypeScript是为开发大型应用而设计的，并且TypeScript可转译成JavaScript。由于TypeScript是JavaScript的严格超集，任何现有的JavaScript程序都是合法的TypeScript程序。

TypeScript支持为现存JavaScript库添加类型信息的定义文件，方便其他程序像使用静态类型的值一样使用现有库中的值。目前有第三方提供常用库如jQuery、MongoDB、Node.js和D3.js的定义文件。

TypeScript编译器本身也是用TypeScript编写，并被转译为JavaScript，以Apache许可证第二版发布。

Snowpack
Snowpack 是一款闪电般快速的前端构建工具，专为现代 Web 设计。 它是开发工作流程中更重、更复杂的打包程序（如 webpack 或 Parcel）的替代品。Snowpack 利用 JavaScript 的原生模块系统（称为 ESM）来避免不必要的工作，无论您的项目有多大，都能保持快速。

snowpack不仅内置esbuild的支持，同时也可以通过配置来支持webpack。在开发过程中，Snowpack 为您的应用程序提供未捆绑的服务。每个文件只需要构建一次，然后永久缓存。当文件更改时，Snowpack 会重建该单个文件。

目录结构

react-snowpack-electron-typescript
├── node_modules
├── package.json
├── package-lock.json
├── pnpm-lock.yaml
├── public
│   └── index.html
├── README.md
├── snowpack.config.mjs
├── src
│   ├── App.tsx
│   └── index.tsx
└── tsconfig.json

开发流程

推荐使用pnpm来代替npm和yarn。主要是它优越的性能和对npm的完美兼容。

pnpx create-snowpack-app react-snowpack-electron-typescript --template @snowpack/app-template-minimal

您现在可以前往新目录并使用以下两个命令启动 Snowpack：

cd react-snowpack-electron-typescript
pnpm start

您应该会看到您的新网站启动并运行！

现在您已经启动并运行了一个基本项目，要安装 React，请在您的项目目录中运行以下命令：

pnpm add -D react react-dom

配置typescript运行以下命令：

pnpm add -D typescript @types/react @types/react-dom

添加渲染内容：

public/index.html

src/index.tsx

import React from 'react';
import { render } from 'react-dom';
import App from './App.jsx';

render(
    
        
    ,
    document.getElementById('root')
);

src/App.tsx

import React from 'react';

function App() {
    return (
        <>
            
my first snowpack+react app
            
hello ❄️Snowpack❄️
        
    )
}

export default App;

在项目的root目录下touch tsconfig.json，用于配置typescript:

{
    "compilerOptions": {
        "module": "ESNext",
        "target": "ESNext",
        "strict": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "jsx": "preserve",
        "noEmit": true,
        "skipLibCheck": true,
        "typeRoots": [
            "node_modules/@types",
            "types"
        ]
    },
    "include": [
        "src",
        "types"
    ]
}

再执行touch main.js, 根据官网教程配置:

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

function createWindow() {
// Create the browser window.
const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
    contextIsolation: true,
    },
});

if (process.env.NODE_ENV === 'production') {
    win.loadFile('./build/index.html');
} else {
    win.loadURL('http://localhost:8080');
}

// Open the DevTools.
win.webContents.openDevTools();
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
    app.quit();
}
});

app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
}
});

参考我的package.json：

"main": "main.js",
"scripts": {
    "dev": "concurrently \"npm run snowpack-dev\" \"npm run electron-start\"",
    "electron-start": "electron .",
    "snowpack-dev": "snowpack dev",
    "snowpack-build": "snowpack build",
    "test": "echo \"This template does not include a test runner by default.\" && exit 1"
},
"devDependencies": {
    "@types/react": "^17.0.34",
    "@types/react-dom": "^17.0.11",
    "concurrently": "^6.4.0",
    "electron": "15.3.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "snowpack": "^3.3.7",
    "typescript": "^4.4.4"
}

最后通过pnpm dev运行。

感谢

在此，特别感谢github的stepanvanzuriak提供的snowpack-electron-react库, 使我对snowpack和electron的结合有了全新的认识。

之前，我并不了解Node.js和Webpack所发展的生态，而且主要从事MVC架构下的后端开发。但是，随着对于前端不断研究和发掘之后，越发地觉得软件开发是一件值得钻研一生，充满趣味和创造力的爱好。“Here， I‘m just a kid who interests on it.”