您的位置：首页 > Web前端 > React

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

2017-09-14 16:53 555 查看

前言

还记得第一次接触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代码作为程序入口：

<!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：

#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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Webpack Gulp React NW-js 打包

相关文章推荐

新的分享

章节导航