init

luffySAMA · Sep 8, 2018 · f779aa0 · f779aa0
1 parent 31cc579
commit f779aa0
Show file tree

Hide file tree

Showing 31 changed files with 9,903 additions and 1 deletion.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "targets": {
+          "browsers": "last 2 Chrome versions",
+          "node": "current"
+        }
+      }
+    ]
+  ],
+  "plugins": [["transform-object-rest-spread", { "useBuiltIns": true }]]
+}
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,12 @@
+node_modules
+.DS_Store
+Thumbs.db
+*.log
+
+/dist
+/temp
+
+# ignore everything in 'app' folder what had been generated from 'src' folder
+/app/app.js
+/app/background.js
+/app/**/*.map
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-2018 luffySAMA
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -1 +1,87 @@
-# electron-app
+# electron-app
+
+将任意网站打包成桌面应用
+
+## 如何使用
+
+```bash
+git clone https://github.com/luffySAMA/electron-app.git
+cd electron-app
+npm install
+npm start
+```
+
+## 启动项目
+
+```bash
+npm start
+```
+
+将会运行一个窗口
+
+## 打包
+
+```bash
+npm run release
+```
+
+将会在`dist`目录生成一个`.exe`的安装包
+
+## 配置打包参数
+
+* 修改英文名： 
+
+    修改`package.json`中的`name`，用于安装时的文件夹路径
+
+* 修改中文名： 
+
+    修改`package.json`中的`productName`，产品名，在安装包、开始菜单、桌面快捷方式等许多地方都会显示
+
+* 修改logo： 
+
+    替换`resources/icon.ico`
+
+    ico需要包含16x16,32x32,48x48,64x64,128x1128,256x256尺寸的图片
+
+* 修改启动页：
+
+    修改`package.json`中的`homepage`
+
+* 修改appid： 
+
+    修改`package.json`中`build`的`appId`，每个应用的appid要唯一
+
+* 修改版本号： 
+
+    修改`package.json`中的`version`，用于安装包名称
+
+* 修改公司名：
+
+    修改`package.json`中的`author`，会显示在windows系统的“程序与功能”里面
+
+* 32位和64位：
+
+默认情况下打包是根据当前电脑是32位还是64位来打的。
+
+通过在`package.json`的`build`中添加如下属性，可以选择打包成32位还是64位。如果同时打32位和64位，那么最终会打成一个安装包，在安装的时候，会自动选择安装多少位的版本。
+
+
+```json
+  "build":{
+    "win": {
+      "target": ["nsis:ia32", "nsis:x64"]
+    }
+  }
+```
+
+* web安装包
+
+  普通的安装包大小约30多M，如果是32位+64位的安装包，则会是60多M，而web版的安装包则非常小，只有几百K，它在安装的时候再根据操作系统位数去下载相应的安装包并安装。
+
+  web安装包的配置方法，[点击这里](docs/NSIS-WEB.md)
+
+  *有了web版的安装包，还可以很顺理成章地实现 `自动更新`*
+
+* 更多详细配置:
+
+    https://www.electron.build/configuration/configuration
diff --git a/app/app.html b/app/app.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title></title>
+</head>
+<body>
+  <script src="app.js"></script>
+</body>
+</html>
diff --git a/build/start.js b/build/start.js
@@ -0,0 +1,20 @@
+const childProcess = require("child_process");
+const electron = require("electron");
+const webpack = require("webpack");
+const config = require("./webpack.app.config");
+
+const env = "development";
+const compiler = webpack(config(env));
+let electronStarted = false;
+
+const watching = compiler.watch({}, (err, stats) => {
+  if (!err && !stats.hasErrors() && !electronStarted) {
+    electronStarted = true;
+
+    childProcess
+      .spawn(electron, ["."], { stdio: "inherit" })
+      .on("close", () => {
+        watching.close();
+      });
+  }
+});
diff --git a/build/webpack.app.config.js b/build/webpack.app.config.js
@@ -0,0 +1,16 @@
+const path = require("path");
+const merge = require("webpack-merge");
+const base = require("./webpack.base.config");
+
+module.exports = env => {
+  return merge(base(env), {
+    entry: {
+      background: "./src/background.js",
+      app: "./src/app.js"
+    },
+    output: {
+      filename: "[name].js",
+      path: path.resolve(__dirname, "../app")
+    }
+  });
+};
diff --git a/build/webpack.base.config.js b/build/webpack.base.config.js
@@ -0,0 +1,44 @@
+const path = require("path");
+const nodeExternals = require("webpack-node-externals");
+const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
+
+const translateEnvToMode = (env) => {
+  if (env === "production") {
+    return "production";
+  }
+  return "development";
+};
+
+module.exports = env => {
+  return {
+    target: "electron-renderer",
+    mode: translateEnvToMode(env),
+    node: {
+      __dirname: false,
+      __filename: false
+    },
+    externals: [nodeExternals()],
+    resolve: {
+      alias: {
+        env: path.resolve(__dirname, `../config/env_${env}.json`)
+      }
+    },
+    devtool: "source-map",
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          use: ["babel-loader"]
+        },
+        {
+          test: /\.css$/,
+          use: ["style-loader", "css-loader"]
+        }
+      ]
+    },
+    plugins: [
+      new FriendlyErrorsWebpackPlugin({ clearConsole: env === "development" })
+    ]
+  };
+};
diff --git a/build/webpack.e2e.config.js b/build/webpack.e2e.config.js
@@ -0,0 +1,29 @@
+const merge = require("webpack-merge");
+const jetpack = require("fs-jetpack");
+const base = require("./webpack.base.config");
+
+// Test files are scattered through the whole project. Here we're searching
+// for them and generating entry file for webpack.
+
+const e2eDir = jetpack.cwd("e2e");
+const tempDir = jetpack.cwd("temp");
+const entryFilePath = tempDir.path("e2e_entry.js");
+
+const entryFileContent = e2eDir
+  .find({ matching: "*.e2e.js" })
+  .reduce((fileContent, path) => {
+    const normalizedPath = path.replace(/\\/g, "/");
+    return `${fileContent}import "../e2e/${normalizedPath}";\n`;
+  }, "");
+
+jetpack.write(entryFilePath, entryFileContent);
+
+module.exports = env => {
+  return merge(base(env), {
+    entry: entryFilePath,
+    output: {
+      filename: "e2e.js",
+      path: tempDir.path()
+    }
+  });
+};
diff --git a/build/webpack.unit.config.js b/build/webpack.unit.config.js
@@ -0,0 +1,29 @@
+const merge = require("webpack-merge");
+const jetpack = require("fs-jetpack");
+const base = require("./webpack.base.config");
+
+// Test files are scattered through the whole project. Here we're searching
+// for them and generating entry file for webpack.
+
+const srcDir = jetpack.cwd("src");
+const tempDir = jetpack.cwd("temp");
+const entryFilePath = tempDir.path("specs_entry.js");
+
+const entryFileContent = srcDir
+  .find({ matching: "*.spec.js" })
+  .reduce((fileContent, path) => {
+    const normalizedPath = path.replace(/\\/g, "/");
+    return `${fileContent}import "../src/${normalizedPath}";\n`;
+  }, "");
+
+jetpack.write(entryFilePath, entryFileContent);
+
+module.exports = env => {
+  return merge(base(env), {
+    entry: entryFilePath,
+    output: {
+      filename: "specs.js",
+      path: tempDir.path()
+    }
+  });
+};
diff --git a/config/env_development.json b/config/env_development.json
@@ -0,0 +1,4 @@
+{
+  "name": "development",
+  "description": "Add here any environment specific stuff you like."
+}
diff --git a/config/env_production.json b/config/env_production.json
@@ -0,0 +1,4 @@
+{
+  "name": "production",
+  "description": "Add here any environment specific stuff you like."
+}
diff --git a/config/env_test.json b/config/env_test.json
@@ -0,0 +1,4 @@
+{
+  "name": "test",
+  "description": "Add here any environment specific stuff you like."
+}