temp add

Author: chen_feng

package.json

@@ -4,15 +4,19 @@
   "author": "app",
   "version": "0.0.1",
   "scripts": {
-    "start": "npm run electron:build && npm run dev",
-    "dev": "concurrently -n=umi,electron -c=blue,green -p=[{name}]  \"cross-env APP_ROOT=src/render umi dev\" \"wait-on http://localhost:9090 && electron .\"",
-    "build:web": "cross-env APP_ROOT=src/render umi build",
+    "start": "npm run dev",
+    "dev": "concurrently -n=umi,electron -c=blue,green -p=[{name}]  \"cross-env APP_ROOT=src/render umi dev\" ",
+    "electron:dev": "node scripts/main-build --env=development --watch",
     "---- webpack 构建 bundle.js electron-webpack ----": "---- webpack 构建 bundle.js ----",
-    "electron:build": "cross-env node src/main/script/build",
+    "electron:build": "node scripts/main-build --env=production",
+    "---- 辅助命令 ----": "---- DIST=dist 指向根目录 dist ----",
+    "build:umi": "cross-env DIST=dist APP_ENV=test APP_ROOT=src/render umi build",
+    "---- close flex routes ----": "---- 开发关闭动态路由，可选 ----",
+    "flex": "concurrently -n=umi,electron -c=blue,green \"cross-env closeFlexRoute=true APP_ENV=test APP_ROOT=src/render umi dev\" \"npm run electron:dev\"",
     "---- 自动根据操作系统平台构建包 electron进程环境变量：APP_ENV=production electron-package ----": "---- 自动根据操作系统平台构建包 ----",
     "pack": "npm run electron:build && cross-env APP_ENV=production APP_ROOT=src/render umi build && electron-builder",
-    "---- 不同接口环境 WEB_ENV=sit  ----": "---- 自动根据操作系统平台构建包 ----",
-    "pack-env-sit": "npm run electron:build && cross-env WEB_ENV=sit APP_ROOT=src/render umi build && electron-builder",
+    "---- 不同接口环境 APP_ENV=test  ----": "---- 自动根据操作系统平台构建包 ----",
+    "pack-env-test": "npm run electron:build && cross-env APP_ENV=test APP_ROOT=src/render umi build && electron-builder",
     "---- 构建三个操作系统平台包 electron-package-all ----": "---- 构建三个操作系统平台包 ----",
     "pack-all": "npm run electron:build && cross-env APP_ENV=production APP_ROOT=src/render umi build && electron-builder -mwl",
     "---- 构建 mac 操作系统平台包 electron-package-mac ----": "---- 构建 mac 操作系统平台包 ----",
@@ -103,6 +107,11 @@
     "eslint-plugin-react": "^7.19.0",
     "mockjs": "^1.1.0",
     "prettier": "^1.19.1",
-    "wait-on": "^4.0.2"
+    "wait-on": "^4.0.2",
+    "dotenv": "^8.2.0",
+    "electron-log": "^4.1.1",
+    "minimist": "^1.2.5",
+    "node-loader": "^0.6.0",
+    "ora": "^4.0.4"
   }
 }

scripts/main-build.js

@@ -0,0 +1,80 @@
+/* eslint-disable @typescript-eslint/camelcase */
+/**
+ * 主进程 webpack 构建
+ * electron 启动交给 electron-connect
+ */
+const path = require('path');
+const child_process = require('child_process');
+const electron = require('electron');
+const webpack = require('webpack');
+const chalk = require('chalk');
+const ora = require('ora');
+const wait_on = require('wait-on');
+const argv = require('minimist')(process.argv.slice(2));
+const config_factory = require('./webpack.main');
+require('dotenv').config({ path: path.join(__dirname, '../src/render/.env') });
+
+const root = path.join(__dirname, '..');
+const main = process.env['npm_package_main'];
+const { env, port = process.env.PORT, watch } = argv;
+const spinner = ora('Electron webpack build...');
+const TAG = 'scripts/main-build.js';
+let watching = null;
+let child = null;
+
+const compiler = webpack(config_factory(env));
+compiler.hooks.afterCompile.tap(TAG, () => {
+  spinner.stop();
+  if (watch) { // 开发模式
+    if (child) { process.kill(child.pid, 'SIGINT'); }
+    child = child_process.spawn(
+      electron,
+      [path.join(root, main)],
+      { stdio: 'inherit', }
+    );
+  }
+});
+compiler.hooks.beforeCompile.tap(TAG, () => {
+  spinner.start();
+});
+
+function compileHandle(err, stats) {
+  if (err) {
+    // err 对象将只包含与webpack相关的问题，例如错误配置等
+    console.log(TAG, chalk.red('💥 Electron webpack 相关报错'));
+    console.log(err);
+
+    // 关闭 wepback 监听
+    watching && watching.close(() => console.log(TAG, 'Watching Ended.'));
+    process.exit(1);
+  } else if (stats.hasErrors()) {
+    // webpack 编译报错
+    const json = stats.toJson('errors-only');
+    console.log(TAG, json.errors);
+    console.log(TAG, chalk.red('💥 Electron 构建报错'));
+  } else {
+    console.log(TAG, chalk.green('Electron webpack 构建完成'));
+  }
+}
+
+if (watch) { // 开发模式
+  const opts = {
+    resources: [`http://localhost:${port}`], // PORT === port
+    interval: 900, // poll interval in ms, default 250ms
+    log: false,
+  };
+
+  // 等待 webpack-dev-server 启动后启动 electron
+  wait_on(opts, function (err) {
+    if (err) {
+      console.log(err);
+      process.exit(1);
+    }
+    // once here, all resources are available
+    watching = compiler.watch({
+      ignored: /bundle\.js(\.map)?/,
+    }, compileHandle);
+  });
+} else { // 构建模式
+  compiler.run(compileHandle);
+}

scripts/webpack.main.js

@@ -0,0 +1,51 @@
+/**
+ * 主进程 webpack 配置
+ */
+const path = require('path');
+
+const resolve = (dir = '') => path.join(__dirname, '../src/main', dir) // 指向 src/main
+
+module.exports = function (env) {
+  process.env.NODE_ENV = env;
+  const isDev = env === 'development';
+
+  return {
+    mode: isDev ? 'development' : 'production',
+    devtool: isDev ? undefined : 'cheap-module-source-map',
+    target: 'electron-main',
+    entry: resolve('index.js'),
+    output: {
+      path: resolve(),
+      filename: 'bundle.js',
+    },
+    node: {
+      __dirname: false,
+      __filename: false
+    },
+    resolve: {
+      extensions: ['.js', '.json', '.ts'],
+      alias: {
+        '@root': path.join(__dirname, '..'),
+      },
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(js|ts)$/,
+          exclude: /node-modules/,
+          loader: 'babel-loader',
+          options: {
+            plugins: ["@babel/plugin-transform-typescript"],
+          },
+        },
+        {
+          test: /\.node$/,
+          loader: isDev ? 'node-loader' : 'relative-loader',
+          options: isDev ? undefined : {
+            relativePath: '/aclas-addons/'
+          }
+        },
+      ]
+    }
+  };
+};