一个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": {
"resizable": true,
"min_width": 900,
"min_height": 600,
"icon": "assets/icon.png" //程序图标
}
}将这些信息添加到NPM的配置文件package.json中，如下：
{
"name": "NW-Demo",
"version": "1.0.0",
"description": "一个nw.js+gulp+webpack+react+materialize开发demo",
"main": "./index.html",//package.json和index.html会被打包到dist文件夹下，所以就是同一目录
"window": {
"resizable": true,
"min_width": 900,
"min_height": 600,
"icon": "assets/icon.png"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
}
}
React+Materialize
由于项目中使用的框架和UI是React和Materialize，先要用NPM安装下：
npm install --save-dev react
npm install --save-dev react-dom
npm install --save-dev materialize-css
npm install --save-dev jquery然后在index.html中写一个基本的HTML代码作为程序入口：
<html>
<head>
<title>NW-Demotitle>
<meta charset="utf-8">
<style type="text/css">
html, body, #root{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
background-color: #ccc;
}
style>
head>
<body>
<div id="root">div>
body>
html>在main.js中是一个React组件，需要注意的是使用materialize-css前要引入jquery、materialize.css、materialize.js：
require("jquery"); //jquery要先引入
require("materialize-css/dist/css/materialize.css");
require("materialize-css/dist/js/materialize.js");
let React = require('react');
let ReactDOM = require('react-dom');
class HelloWorld extends React.Component {
render() {
return (
<div className="row">
<div className="col s6 offset-s3">
<div className="card blue-grey darken-1">
<div className="card-content white-text">
"card-title">Hello
NW.js + Gulp + Webpack + React + Materialize
div>
div>
div>
div>
);
}
}
ReactDOM.render(这样一个基本的Hello world就差不多了，接下来就是使用Webpack+Babel打包项目。
Webpack+Babel
由于项目中存在图片、字体（materialize会自动引用）、.json（需要将package.json复制到dist文件夹）、HTML、CSS文件、JSX转换，所以使用Webpack要解决这些文件。
首先安装Webpack和Babel：
#Webpack
npm install --save-dev webpack style-loader html-webpack-plugin file-loader css-loader copy-webpack-plugin
#Babel
npm install --save-dev babel-core babel-preset-es2015 babel-preset-react由于我想直接在使用Webpack打包的时候使用Babel，还需要安装babel-loader：
npm install --save-dev babel-loader然后在项目中添加webpack.config.js文件：
const path = require('path');
//用于icon和package.json
const CopyWebpackPlugin = require('copy-webpack-plugin');
//HTML
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports =
{ module: {
rules: [
//JSX & JS， Babel转码
{
test: /\.jsx?$/,
use: ['babel-loader']
},
// CSS
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
// font
{
test: /\.(eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
use: [
{
loader: 'file-loader',
options: {outputPath: "font/"}
}
]
}
]
},
entry: {
main: "./src/app/main.js"
},
output:{
path : path.resolve(__dirname, "./dist"),//需要绝对路径
filename : "[name].js",
},
plugins: [
new HtmlWebpackPlugin({
title: 'NW-Demo',
filename: 'index.html',
inject: 'body',
template: "src/view/index.html",
chunks: ['main']
}),
new CopyWebpackPlugin([
//导入icon
{
from: path.resolve(__dirname, './src/assets/icon.png'),
to: 'assets/icon.png'
},
//导入package.json
{
from: path.resolve(__dirname, './package.json'),
to: 'package.json'
}
])
]
};添加Babel配置文件.babelrc：
//.babelrc
{
"presets": [
"react",
"es2015"
],
"ignore":[
"jquery.js",
"jquery.min.js",
"materialize.js",
"materialize.min.js"
]
}最后在package.json的scripts中添加几条命令：
"scripts": {
"start": "nwjs dist", //在dist目录启动NW.js
"build": "webpack --display-reasons", //使用Webpack打包
"mw-prod": "nwbuild -p win64 -o out/ dist/" //NW打包，需要安装nwbuild包
}大功告成！
在命令行中输入npm run build， 打包结束后输入npm run start ，就可以看到Hello world界面了：
使用Gulp进行自动化构建
最后，我在这个项目中使用了Gulp进行自动构建。主要就是针对Webpack打包和NW.js打包，其配置文件gulpfile.js内容如下：
let gulp = require('gulp');
let clean = require('gulp-clean');
let shell = require('gulp-shell');
let webpack = require('webpack');
let webpack_config = require('./webpack.config.js');
//Webpack编译
gulp.task('run', ['webpack'] ,shell.task(['npm run start']));
gulp.task('webpack', ['clean'], function(cb) {
webpack(webpack_config, function(err, stats) {
if(err) throw new Error(err);
console.log(stats.compilation.fileDependencies);
cb();
});
});
gulp.task('clean', function(cb){
return gulp.src('dist', {read: false}).pipe(clean());
cb();
});
//NW打包
gulp.task('prod', ['clean-out'] ,shell.task(['npm run mw-prod']));
gulp.task('clean-out', function(cb){
return gulp.src('out', {read: false}).pipe(clean());
cb();
});由其中的引用可知，需要先在项目中安装gulp、gulp-clean、gulp-shell。
然后修改package.json中的scripts：
"scripts": {
"start": "nwjs dist",
"build": "gulp run",
"prod": "gulp prod"
}这样每次编译或者打包的时候就会先清理原来的文件，然后自动启动NW.js。
大功告成 again ！
代码地址：
https://git.oschina.net/liuyaqi/nw-app.git