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

来源：互联网发布：单片机创意设计编辑：程序博客网时间：2024/06/05 00:53

前言

还记得第一次接触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-appF:\>cd nw-appF:\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 reactnpm install --save-dev react-domnpm install --save-dev materialize-cssnpm install --save-dev jquery

然后在index.html中写一个基本的HTML代码作为程序入口：

<!DOCTYPE html><html><head>    <title>NW-Demo</title>    <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">                  <span className="card-title">Hello</span>                  <p>NW.js + Gulp + Webpack + React + Materialize</p>                </div>              </div>            </div>        </div>    );  }}ReactDOM.render(<HelloWorld/>, document.getElementById('root'));

这样一个基本的Hello world就差不多了，接下来就是使用Webpack+Babel打包项目。

Webpack+Babel

由于项目中存在图片、字体（materialize会自动引用）、.json（需要将package.json复制到dist文件夹）、HTML、CSS文件、JSX转换，所以使用Webpack要解决这些文件。
首先安装Webpack和Babel：

#Webpacknpm install --save-dev webpack style-loader html-webpack-plugin file-loader css-loader copy-webpack-plugin#Babelnpm 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.jsonconst CopyWebpackPlugin = require('copy-webpack-plugin');//HTMLconst 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

阅读全文

1 0