在纠结了一个月以后，发了无数帖子，我终究舍弃nw.js投入electron的度量，事实证明我是对的，electron居然有中文文档，另有官方示例，几乎不要太爽！

1.electron基础知识

1.主衬着历程
让我们来看看electron的入门例子,

//  引入electron模块
const electron = require('electron'); 
//  掌握运用的生命周期,给app绑定种种状况事宜来掌握生命周期
const app = electron.app; 
//  掌握原生浏览器窗口
const BrowserWindow = electron.BrowserWindow; 
//  path途径治理模块
const path = require('path'); 
//  url治理模块
const url = require('url'); 
//  与衬着历程通讯的ipc模块
const ipc = require('electron').ipcMain;
//  永远寄存一个window对象的援用，不然会被对象渣滓接纳而使运用封闭
let mainWindow; 

//  天生一个浏览器窗口
function createWindow () {
  //  运用new 一个BrowserWindow对象实例猎取一个新的窗口，由于援用在表面不会被消弭
  mainWindow = new BrowserWindow({width: 1000, height: 750, resizable: true, frame:true});

  //  内核照样网页，因而要翻开网页
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  })); 

  //   启用开辟者东西
  //  mainWindow.webContents.openDevTools()

  //   给窗口封闭事宜设置回调函数，使这个实例为空
  mainWindow.on('closed', function () {
    //  假如运用支撑多窗口，应当将多个window对象放在一个数组中举行治理，与此同时，删除对应的元素
    mainWindow = null; 
  });
   //    衬着历程发送音讯，我请求你封闭运用！
  ipc.on('exitWindow',function () {
    mainWindow.close();
  });
}

//  给窗口预备设置回调，在创建了窗口后实行这个函数
app.on('ready', createWindow); 

//  给悉数窗口封闭时绑定回调，与上面差别，上面只烧毁对应的窗口对象，这里会完整退出
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit(); 
  }
});


//  给点击图标设置回调，开启一个新窗口
app.on('activate', function () {
  if (mainWindow === null) {
    createWindow(); 
  }
});

解说：我最先也迷惑了良久主历程和衬着历程究竟是个什么玩意？有什么关系？
我深刻的明白：

• 主历程 main.js来替代,是顺序的进口，他是跑在node上的东西，担任挪用electron的响应模块，把你这个运用从html到桌面运用竖立起来，比方内里的new BrowserWindow就是竖立一个新窗口，然则真正这个界面什么样的，界面的种种div的点击事宜，是不归他管的，然则这个运用的放大减少，启动封闭，原生的菜单栏，翻开文件窗口都是由他来管，衬着历程管不了，试想一下，如果网页内部能够随便掌握这个运用的封闭翻开，不是很风险？

• 衬着历程 index.js来替代,实在就是网页援用的js文件，你能够深刻的明白他跑在浏览器上，换了个名字罢了，然则由于是桌面运用，基于浏览器的多线程，能够翻开许多页面，这里也能够有许多衬着历程，而且index.js中能够运用node的模块，比方

    fs.readdir('av......',(err,data)=>{
        if(err){
            alert('啊呀片没了');
        }
    });

文件读错了能直接alert！这不是很爽！
相干api人人能够查阅
https://github.com/electron/e… 写的异常详实！

基本知识有了，人人能够来搭建开辟环境了。

2. 环境搭建

1. sf上的教程比较老了，如今没有npm install electron-prebuilt了，直接npm install electron -g，并且在开辟目次也举行装置即可,这里当地目次新手能够不要本身装置，运用官方的实例代码，然后就能够看到我之前给的main.js，人人能够把html改一改就能够竖立本身的运用了，由于ide是个不怎么跳转的页面，很简单，一切这内里没啥技术含量，然则能够让人人疾速上手electron的设置，我就来说一讲。

   $ git clone https://github.com/electron/electron-quick-start     //下载官方示例代码
   $ cd electron-quick-start
   $ npm install && npm start //这条就是装置并运行了！
   

2. 假如你要用到jquery，jq插件之类的看这里！！！！

   window.nodeRequire = require;
   delete window.require;
   delete window.exports;
   delete window.module;

   在html的最前面用script引入这段代码，以后用nodeRequire来替代node的require，由于require，module等已挂在window中，会和jquery争执

在webpack中只管运用import来引入模块而不是require，不然也会争执，我至今没找到处理方案。。。。。。

var webpack = require("webpack");
var path = require("path");
var pathMap = require('./src/pathmap.json');
var srcDir = path.resolve(process.cwd(), 'src');
var nodeModPath = path.resolve(__dirname, './node_modules');

module.exports = {
    entry: {
        index:"./src/js/index.js"
    },//进口js，可为数组
    output: {
        path: path.join(__dirname, "src/dist"),
        filename: "[name]pack.js"
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!sass-loader'
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ],
    },
    resolve: {
        extensions: ['.js', "", ".css", ".scss"],//指明那些文件名是webpack要扫描到的
        root: [srcDir, nodeModPath],
        alias: pathMap,
        publicPath: '/'
    },

}

webpack.config没什么希奇的，就是配了avalon的途径和sass-loader注重假如你要运用scss也是sass-loader，只管运用cnpm来处理node-sass的坑，webpack的设置我就不讲了

设置好了就能够兴奋的最先开辟了！实在照样传统的写网页罢了，只不过能够到场node了，很酷炫是否是！