Skip to content

Latest commit

 

History

History
163 lines (111 loc) · 3.23 KB

README.zh-CN.md

File metadata and controls

163 lines (111 loc) · 3.23 KB

一套使用 react + redux + webpack 构建 Electron 的模板。

English | 简体中文

开始

首先,通过下面的命令安装相应的 cli tools:

npm i -g @fujia/cli-core

# or using yarn
yarn global add @fujia/cli-core

然后, 通过上面全局安装的 cli tools 使用模板初始化项目:

# step1. create project folder
mkdir [project name]; cd $_;

# step2. initial project via the template
stage init

# step3. select "default" option.

# step4. select "app" option.

# step5. entering project name and version.

# step3. select "electron-react-webpack" option.

当然, 如果你不想在全局安装@fujia/cli-core,你也可以使用下面的命令快速初始化一个项目:

# step1. create project folder
mkdir [project name]; cd $_;

# step2. initial project via the template
npm init stage@latest

# the other steps follow above.

就是这样, 项目会自动安装依赖并启动。

开发

  1. 在 dev 环境下启动应用:
npm start
  1. 使用下面的命令,为当前宿主机的操作系统打包应用:
npm run release

但是,请注意, 当前项目需要指定一个 git 仓库,否则,上面的命令会失败。默认情况下是使用 GitHub 的,可以查看文件scripts/release/index.js

const release = {
  // ...
  buildInstaller() {
    // ...
    publish: {
      provider: 'github',
      repo: '',
      releaseType: 'release',
      // token: process.env.GH_TOKEN,
    },
    publish: 'always',
    // ...
  }
}

可以手动添加一个远程的 GitHub 仓库,或者使用下面的命令添加:

stage publish

tips:需要全局安装@fujia/cli-core,这样才能在全局环境中使用 stage 命令。

  1. 构建一个未打包的应用,便于测试。
npm run pack

注意

默认情况下,我们禁用了 node integration, 为什么? 查看这里

如果你想启用 node integration 或使用原生模块,请按照下面的步骤修改对应的配置:

webpack.config.renderer.base.js

- target: ['web', 'electron-renderer'],
+ target: 'electron-renderer',

- library: {
-  type: 'umd',
- },

webpack.config.main.prod.js

entry: {
   main: srcMainEntryPath,
-  preload: srcMainPreloadPath,
},

main.ts

webPreferences: {
+  nodeIntegration: true,
+  contextIsolation: false,
-  preload: app.isPackaged
-    ? path.join(__dirname, 'preload.js')
-    : path.join(__dirname, '../../release/bundled/preload.js'),
},

Maintainers

License

MIT © electron-webpack-react-template

参考资料

  1. 《深入浅出 Electron:原理、工程与实践》

  2. electron-react-boilerplate