一个NW.js+Webpack+Gulp+React的Hello World

前言

还记得第一次接触NW.js时，这玩意还叫做node-webkit，当时非常欣喜看完了官网的所有demo，感觉还不错，后来就把它晾在一边了。结果现在已经更名为NW（现在还有类似的平台electron），真是Time flies~ 现在就结合所学所了解到的Webpack、Gulp、React、Materialize、Babel这些工具在NW.js平台上写一个新工程Hello world，以后会在这个工程基础上用不同的分支做点小程序，就当是编程练手-_-||

NW.js简介与安装

NW.js是基于Node.js和Chromium的一个平台，结合了前端开发的便捷与Node强大API两方面的优点，可以用HTML和JavaScript写桌面级应用程序，并可以在DOM中直接调用Node.js模块。也就是说，NW.js使用纯JavaScript相关技术编写桌面应用，并可以打包成Mac、Windows、Linux不同平台的本地应用。官网的一句话介绍：

NW.js (previously known as node-webkit) lets you call all Node.js modules directly from DOM and enables a new way of writing applications with all Web technologies.

安装NW.js十分简单，直接在官网下载NORMAL或者SDK版本，区别是前者不能调出Chromium调试工具（但是体积较小）。我下载的是SDK v0.25.0。在Windows平台下载解压后，直接双击nw.exe即可运行出NW.js的平台界面：

可以看出这个版本是基于Node v8.4.0+Chromium 61.0。由于Mac和Windows上的命令行中启动NW.js的命令一个是nwjs，一个是nw，我就直接把Windows下的nw.exe更名为nwjs.exe，然后将该目录添加到环境变量，这样就可以直接在命令行中启动NW.js，而且启动方法与Mac下的基本一致。（我寝室用的Mac机房用的Windows，为了能在两个系统下都能直接运行代码，就要解决命令行中nwjs与nw的差异）

在NW.js上写一个简单的Hello world可以参见这篇文章： 继续挖坑之 NW.js (一) 介绍

项目结构一览

先看看项目的基本文件结构，如下所示：

│  .babelrc
│  gulpfile.js
│  package.json
│  webpack.config.js
│
├─dist
├─node_modules
├─out
└─src
    ├─app
    │      main.js
    ├─assets
    │      icon.png
    ├─style
    │      style.css
    └─view
            index.html

说明：

• dist：存放Webpack打包后的文件
• node_modules：第三方包，使用NPM管理
• out：放的是使用NW打包成本地应用，在Mac环境中里面就会生成一个.app文件
• src：项目源码，.js、图片资源、.css、.html分别放在app、assets、style、view文件夹中
• .babelrc：Babel配置文件
• gulpfile.js：Gulp配置文件及入口
• package.json：NW.js与NPM共同配置文件（主要是两者都叫package.json，我就索性合在一起）
• webpack.config.js：Webpack配置文件及入口

自己感觉项目的结构还是比较清晰的^_^，下面就从零开始讲下项目的配置。

Getting Started

首先建一个nw-app文件夹，然后使用NPM初始化：

F:\>mkdir nw-app
F:\>cd nw-app
F:\nw-app>npm init

然后把项目中相关文件夹建好，之后就要修改项目中的package.json文件，使之能满足NW.js的格式要求。这里给出NW.js配置文件的官网文档链接：Manifest Format 一个基本的NW.js配置文件及说明如下：

{
  "main": "index.html",  //入口文件
  "version": "1.0.0",  //版本，打包的时候需要
  "name": "nw-demo",  //程序名
  //窗口设置
  "window": {