init project

.babelrc

@@ -0,0 +1,16 @@
+{
+  "presets": [
+    [
+      "latest", {
+        "es2015": {
+          "modules": false
+        }
+      }
+    ],
+    "react",
+    "stage-0"
+  ],
+  "plugins": [
+    "react-hot-loader/babel"
+  ]
+}

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+out
+dist
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+
+#IDE
+.idea

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Kenny Wang <[email protected]>
+
+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.

README.md

@@ -0,0 +1,45 @@
+# Awesome Mac App
+
+[![](./icns/logo.svg)](https://github.com/jaywcjlove/amac)
+
+## Screenshots
+
+![](./icns/app.png)
+
+## Development
+
+To develop, run the self-reloading build:
+
+Get the code
+
+```bash
+$ git clone https://github.com/jaywcjlove/amac.git
+$ cd amac
+$ npm install # or  yarn install
+```
+
+To develop, run the self-reloading build:
+
+```bash
+# Run the app
+$ npm run app
+
+# Restart the app automatically every time code changes. 
+# Useful during development.
+$ npm run dev
+$ npm run app:dev
+```
+
+`npm run dev` will live-reload the frontend so you don't need to refresh. If you change main.js however, you'll have to restart electron to reload your changes.
+
+## Package the app
+
+Builds app binaries for Mac.
+
+```bash
+$ npm run package
+```
+
+## License
+
+Licensed under the [MIT](./LICENSE) License.

build/pack

@@ -0,0 +1,33 @@
+#!/usr/bin/env node
+const packager = require('electron-packager')
+const path = require('path')
+const pkg = require('../package')
+
+// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md
+packager({
+  dir: path.join(__dirname, '..'),
+  appCopyright: '© 2017, kenny wang',
+  asar: true,
+  overwrite: true,
+  electronVersion: pkg.electronVersion,
+  icon: path.join(__dirname, '..', 'icns', 'icon'),
+  out: path.join(__dirname, '..', 'out'),
+  ignore:true,
+  platform: 'mas',
+  appBundleId: `wang.kenny.${pkg.name}`,
+  appCategoryType: 'public.app-category.developer-tools',
+  osxSign: {
+    type: process.env.NODE_ENV === 'production' ? 'distribution' : 'development',
+    entitlements: path.join(__dirname, '..', 'parent.plist'),
+    'entitlements-inherit': path.join(__dirname, '..', 'child.plist')
+  }
+},function (err, res) {
+  if (err) {
+    console.log(err)
+    process.exit(0);
+    return ;
+    // throw err;
+  }
+
+  const app = path.join(res[0], `${pkg.productName}.app`)
+})

build/webpack.config.js

@@ -0,0 +1,118 @@
+const webpack = require('webpack')
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const path = require('path')
+
+
+const extractCSS = new ExtractTextPlugin('css/[contenthash].css')
+const extractLESS = new ExtractTextPlugin('css/[contenthash].css')
+
+module.exports = {
+  entry: {
+    'app': [
+      'babel-polyfill',
+      'react-hot-loader/patch',
+      'webpack/hot/only-dev-server',
+      './src/index'
+    ]
+  },
+  output: {
+    path: path.resolve(process.cwd(), './dist'),
+    filename: '[name].js',
+    publicPath: '/'
+  },
+  module: {
+    rules: [
+      {
+        exclude: [
+          /\.html$/,
+          // We have to write /\.(js|jsx)(\?.*)?$/ rather than just /\.(js|jsx)$/
+          // because you might change the hot reloading server from the custom one
+          // to Webpack's built-in webpack-dev-server/client?/, which would not
+          // get properly excluded by /\.(js|jsx)$/ because of the query string.
+          // Webpack 2 fixes this, but for now we include this hack.
+          // https://github.com/facebookincubator/create-react-app/issues/1713
+          /\.(js|jsx)(\?.*)?$/,
+          /\.css$/,
+          /\.less$/,
+          /\.json$/,
+          /\.svg$/,
+          /\.png$/,
+          /\.(jpe?g)$/,
+        ],
+        use:[{
+          loader: 'file-loader',
+          query: {
+            name: '[name].[ext]'
+          }
+        }]
+      },
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
+      {
+        test: /\.(css|less)$/,
+        exclude: /node_modules/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              minimize: true,
+              importLoaders: 2,
+              sourceMap: true
+            },
+          },
+          'less-loader',
+        ]
+      },
+
+      // {
+      //   test: /\.less$/,
+      //   use: extractLESS.extract({
+      //       use:[
+      //         {
+      //           loader:'css-loader',
+      //           options: {
+      //             // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader 
+      //             importLoaders: 1 
+      //           }
+      //         },
+      //         'less-loader'
+      //       ] 
+      //   }),
+      // },
+      {
+        // "css-loader" 可以解析CSS中的路径，并添加资源作为依赖关系。
+        // "style-loader" 将CSS转换为注入<style>标签的JS模块。
+        // 在生产中，我们使用一个插件将该CSS提取到一个文件，但是
+        // 在开发中“样式”装载器可以对CSS进行热编辑。
+        test: /\.css$/,
+        use: extractCSS.extract({
+            use:[
+              {
+                loader:'css-loader',
+                options: {
+                  // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader 
+                  importLoaders: 1 
+                }
+              }
+            ] 
+        })
+      },{
+        test: /\.json$/,
+        use:['json-loader']
+      }
+    ]
+  },
+  plugins:[
+    extractCSS,
+    extractLESS,
+    // 解决开发时提示React没有切换到产品版本
+    // [React doesn't switch to production mode](http://stackoverflow.com/questions/37311972/react-doesnt-switch-to-production-mode)
+    new webpack.DefinePlugin({
+        'process.env': {
+            NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+        },
+        '$dirname': '__dirname',    // 解决webpack编译时将 __dirname 转为本地局部变量
+    })
+  ],
+  target: 'electron-renderer'
+}

build/webpack.dev.js

@@ -0,0 +1,14 @@
+var webpack = require('webpack');
+var merge = require('merge-array-object');
+var path = require('path')
+var webpack_config = require('./webpack.config');
+
+module.exports = merge(webpack_config,{
+  devtool: 'source-map',
+  output: {
+    publicPath: '/dist'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin()
+  ],
+})

build/webpack.prod.js

@@ -0,0 +1,26 @@
+var webpack = require('webpack');
+var merge = require('merge-array-object');
+var webpack_config = require('./webpack.config');
+
+module.exports = merge(webpack_config,{
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    }),
+    // 压缩并打包文件
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        screw_ie8: true, // React doesn't support IE8
+        warnings: false
+      },
+      mangle: {
+        screw_ie8: true
+      },
+      output: {
+        comments: false,
+        screw_ie8: true
+      }
+    })
+  ],
+})

main/index.html

@@ -0,0 +1,30 @@
+<html lang="en">
+  <head>
+    <title>amac</title>
+    <meta charset="UTF-8">
+    <script type="text/javascript">
+      // (function() {
+      //   if (!process.env.HOT) {
+      //     const link = document.createElement('link');
+      //     link.rel = 'stylesheet';
+      //     link.href = '../dist/style.css';
+      //     document.write(link.outerHTML);
+      //   }
+      // }());
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script>
+      {
+        var port = process.env.PORT || 8080;
+        var script = document.createElement('script');
+        script.async=true;
+        script.src = (process.env.NODE_ENV === 'dev') 
+          ? 'http://localhost:' + port + '/dist/app.js' 
+          : '../dist/app.js';
+        document.write(script.outerHTML);
+      };
+    </script>
+  </body>
+</html>

main/main.js

@@ -0,0 +1,37 @@
+'use strict'
+const electron = require('electron')
+// Module to control application life.
+const {app,Menu} = electron
+const windows = require('./windows')
+const menu = require('./menu')
+
+// 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.on('ready', function(){
+  Menu.setApplicationMenu(menu);
+  windows.create('index');
+})
+
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+  // On OS X 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', function (e, hasVisibleWindows) {
+  // On OS X 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 (mainWindow === null) {
+  //   createWindow()
+  // }
+  if (!hasVisibleWindows) {
+    windows.create();
+  }
+})
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and require them here.