刘新修个人博客

nodeJs构建一个HttpServer

[

2016/09/04 20:19 | by 刘新修 ]

将下面代码放入server.js中

JavaScript代码

var http = require("http");
http.createServer(function(request, response) {
console.log('request received');
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("Hello World");
response.end();
}).listen(8888);
console.log('server started');

执行node server.js
打开http://localhost:8888/，页面显示Hello World

JavaScript代码

var http=require('http');
var data={key:'value', hello:'world'};
var srv=http.createServer(function (req, res) {
res.writeHead(200,{'Content-Type': 'application/json'});
res.end(JSON.stringify(data));
});
srv.listen(8080,function() {
console.log('listening on localhost:8080');
});

Tags: node , httpserver

NodeJs平台 | 评论(0) | 引用(0) | 阅读(1008)

nodejs 提供了一个 node-uuid 模块用于生成 uuid:

[

2016/09/04 14:07 | by 刘新修 ]

首先执行：npm install node-uuid -g

JavaScript代码

var uuid = require('node-uuid');
//var uuid = require('/usr/local/nodejs/lib/node_modules/node-uuid');
console.log(uuid.v1())
console.log(uuid.v4())

注明：如果在linux下编译安装node可以使用软连接ls 或这直接写绝对路径引入需要的nmp模块!

v1 是基于时间戳生成uuid

v4是随机生成uuid

结果：

57af5b10-3a76-11e5-922a-75f42afeee38
f3917fb9-9bde-4ec1-a7cf-966251b3d22a

Tags: node , uuid

NodeJs平台 | 评论(0) | 引用(0) | 阅读(2875)

nodejs中exports与module.exports的区别

[

2016/09/04 13:17 | by 刘新修 ]

你肯定非常熟悉nodejs模块中的exports对象，你可以用它创建你的模块。例如：（假设这是rocker.js文件）

JavaScript代码

exports.name = function() {
console.log('My name is Lemmy Kilmister');
};

在另一个文件中你这样引用

JavaScript代码

var rocker = require('./rocker.js');
rocker.name(); // 'My name is Lemmy Kilmister'

那到底Module.exports是什么呢？它是否合法呢？

其实，Module.exports才是真正的接口，exports只不过是它的一个辅助工具。　最终返回给调用的是Module.exports而不是exports。

所有的exports收集到的属性和方法，都赋值给了Module.exports。当然，这有个前提，就是Module.exports本身不具备任何属性和方法。如果，Module.exports已经具备一些属性和方法，那么exports收集来的信息将被忽略。

修改rocker.js如下：

JavaScript代码

module.exports = 'ROCK IT!';
exports.name = function() {
console.log('My name is Lemmy Kilmister');
};

再次引用执行rocker.js

JavaScript代码

var rocker = require('./rocker.js');
rocker.name(); // TypeError: Object ROCK IT! has no method 'name'

发现报错：对象“ROCK IT!”没有name方法

rocker模块忽略了exports收集的name方法，返回了一个字符串“ROCK IT!”。由此可知，你的模块并不一定非得返回“实例化对象”。你的模块可以是任何合法的javascript对象--boolean, number, date, JSON, string, function, array等等。

你的模块可以是任何你设置给它的东西。如果你没有显式的给Module.exports设置任何属性和方法，那么你的模块就是exports设置给Module.exports的属性。

下面例子中，你的模块是一个类：

JavaScript代码

module.exports = function(name, age) {
this.name = name;
this.age = age;
this.about = function() {
console.log(this.name +' is '+ this.age +' years old');
};
};

可以这样应用它：

JavaScript代码

var Rocker = require('./rocker.js');
var r = new Rocker('Ozzy', 62);
r.about(); // Ozzy is 62 years old

下面例子中，你的模块是一个数组：

JavaScript代码

module.exports = ['Lemmy Kilmister', 'Ozzy Osbourne', 'Ronnie James Dio', 'Steven Tyler', 'Mick Jagger'];

可以这样应用它：

JavaScript代码

var rocker = require('./rocker.js');
console.log('Rockin in heaven: ' + rocker[2]); //Rockin in heaven: Ronnie James Dio

现在你明白了，如果你想你的模块是一个特定的类型就用Module.exports。如果你想的模块是一个典型的“实例化对象”就用exports。

给Module.exports添加属性类似于给exports添加属性。例如：

JavaScript代码

module.exports.name = function() {
console.log('My name is Lemmy Kilmister');
};

同样，exports是这样的

JavaScript代码

exports.name = function() {
console.log('My name is Lemmy Kilmister');
};

请注意，这两种结果并不想同。前面已经提到module.exports是真正的接口，exports只不过是它的辅助工具。推荐使用exports导出，除非你打算从原来的“实例化对象”改变成一个类型。

NodeJs平台 | 评论(0) | 引用(0) | 阅读(918)

gcc-4.4.7升级至gcc-5.3.0 后编译安装node-v4.5.0

[

2016/09/02 15:19 | by 刘新修 ]

yum -y install gcc gcc-c++

因centOS6.6/+ 最高版本的gcc也只到4.4.7版本,只好手动升级一下了。

.tar.gz 格式解压为 tar -zxvf xx.tar.gz

.tar.bz2 格式解压为 tar -jxvf xx.tar.bz2

下载gcc-4.8.2源码:

wget ftp://gcc.gnu.org/pub/gcc/releases/gcc-4.8.2/gcc-4.8.2.tar.bz2

wget ftp://gcc.gnu.org/pub/gcc/releases/gcc-4.9.1/gcc-4.9.1.tar.gz

tar jxvf gcc-4.8.2.tar.bz2

执行自动下载依赖(gmp-4.3.2、mpfr-2.4.2、mpc-0.8.1)

/home/installSoft/gcc-4.8.2/contrib/download_prerequisites

或者自己下载也行(根据gcc-4.8自动匹配好的版本收集比较兼容)：

wget ftp://gcc.gnu.org/pub/gcc/infrastructure/gmp-4.3.2.tar.bz2

wget ftp://gcc.gnu.org/pub/gcc/infrastructure/mpfr-2.4.2.tar.bz2

wget ftp://gcc.gnu.org/pub/gcc/infrastructure/mpc-0.8.1.tar.gz

=====================================================================================

第一部分安装gcc的依赖库

=====================================================================================

gcc 编译需要三个额外库gmp、mpfr、mpc，下载并按照下面的顺序安装它们，如下:

wget ftp://ftp.gnu.org/gnu/gmp/gmp-5.1.3.tar.gz

wget ftp://ftp.gnu.org/gnu/mpfr/mpfr-3.1.2.tar.gz

wget http://www.multiprecision.org/mpc/download/mpc-1.0.tar.gz

tar -zxvf gmp-5.1.3.tar.gz

cd gmp-5.1.3

./configure --prefix=/usr/local/gmp-5.1.3

make && make install

cd ..

tar -zxvf mpfr-3.1.2.tar.gz

cd mpfr-3.1.2

./configure --prefix=/usr/local/mpfr-3.1.2 --with-gmp=/usr/local/gmp-5.1.3

make && make install

cd ..

tar -zxvf mpc-1.0.tar.gz

cd mpc-1.0

./configure --prefix=/usr/local/mpc-1.0 --with-gmp=/usr/local/gmp-5.1.3 --with-mpfr=/usr/local/mpfr-3.1.2

make && make install

cd ..

=====================================================================================

第二部分安装gcc

=====================================================================================

wget http://ftp.gnu.org/gnu/gcc/gcc-5.3.0/gcc-5.3.0.tar.gz

cd gcc-build-5.3.0

../configure --prefix=/usr/local/gcc -enable-threads=posix -disable-checking -disable-multilib -enable-languages=c,c++ --with-gmp=/usr/local/gmp-5.1.3 --with-mpfr=/usr/local/mpfr-3.1.2 --with-mpc=/usr/local/mpc-1.0

make

make install

执行以下看看装好没有：

/usr/local/gcc/bin/gcc -v

gcc version 4.8.2 (GCC)

卸载旧版本

yum remove -y gcc gcc-c++

updatedb

链接新版本

cd /usr/bin

ln -s /usr/local/gcc/bin/gcc gcc

ln -s /usr/local/gcc/bin/g++ g++

检查版本

gcc -v

g++ -v

=====================================================================================

第三部分安装nodeJs

=====================================================================================

1、NodeJS下载

https://nodejs.org/en/download/

[root@test1 packages]# wget https://nodejs.org/dist/v4.5.0/node-v4.5.0.tar.gz

2、解压安装

tar -zxvf node-v4.5.0.tar.gz

cd node-v4.5.0

./configure --prefix=/usr/local/nodejs

make

make install

=============================================

如果configure默认安装路径node复制到bin下：

cp /usr/local/bin/node /usr/sbin/

如果configure指定安装路径node复制到bin下：

/usr/local/nodejs/bin/node -v

cp /usr/local/nodejs/bin/node /usr/sbin/

==============================================

安装nodeJS时候报：CC: command not found 是因为gcc升级后，同时也删除了cc标签链接至gcc的命令，cc是unix下的产物，linux下的cc就是gcc

链接cc至gcc[库]一般放在/usr/bin

ln -s /usr/bin/gcc /usr/bin/cc

[系统短命令]一般放在/usr/sbin

cp /usr/local/nodejs/bin/node /usr/sbin/

安装完成，查看node版本号:

[root@Hongkong node-v4.5.0]# node -v

v4.5.0

[root@Hongkong node-v4.5.0]#

=====================================================================================

依次编译安装下载的依赖包(好像已经自动解压了)：

cd /home/installSoft/gcc-4.8.2/contrib/gmp

mkdir build

cd build

../configure

sudo make

sudo make install

cd /home/installSoft/gcc-4.8.2/contrib/mpfr

mkdir build

cd build

../configure --prefix=/usr/local/gcc/mpfr-2.4.2 --with-gmp=/usr/local/gcc/gmp-4.3.2

sudo make

sudo make install

cd /home/installSoft/gcc-4.8.2/contrib/mpc

mkdir build

cd build

../configure --prefix=/usr/local/gcc/mpc-0.8.1 --with-mpfr=/usr/local/gcc/mpfr-2.4.2 --with-gmp=/usr/local/gcc/gmp-4.3.2

sudo make

sudo make install

删除原先的目录：

rm -rf /usr/local/gcc

编译安装gcc4.8.2

cd /home/installSoft/gcc-4.8.2/

mkdir build

../configure --prefix=/usr/local/gcc --enable-threads=posix --disable-checking --enable-languages=c,c++ --disable-multilib --with-gmp=/usr/local/gcc/gmp-4.3.2 --with-mpfr=/usr/local/gcc/mpfr-2.4.2 --with-mpc=/usr/local/gcc/mpc-0.8.1

sudo make

sudo make install

../configure --prefix=/usr/local/gcc --enable-checking=release --enable-languages=c,c++ --disable-multilib

如果make出现configure: error: cannot compute suffix of object files: cannot compile

原来如此，接下来把mpc ,gmp,mpfr 的lib文件夹果断加入到 LD_LIBRARY_PATH 变量

注意此处的三个lib，根据你所安装的路径来设置：

export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/gcc/mpc-0.8.1/lib:/usr/local/gcc/gmp-4.3.2/lib:/usr/local/gcc/mpfr-2.4.2/lib

/home/installSoft/node-v4.5.0/out/Release/mksnapshot: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.15' not found (required by /home/installSoft/node-v4.5.0/out/Release/mksnapshot)

strings /usr/lib64/libstdc++.so.6 | grep GLIBCXX

查看 GLIBCXX 版本：

[root@Hongkong node-v4.5.0]# strings /usr/lib64/libstdc++.so.6 | grep GLIBCXX

GLIBCXX_3.4

GLIBCXX_3.4.1

GLIBCXX_3.4.2

GLIBCXX_3.4.3

GLIBCXX_3.4.4

GLIBCXX_3.4.5

GLIBCXX_3.4.6

GLIBCXX_3.4.7

GLIBCXX_3.4.8

GLIBCXX_3.4.9

GLIBCXX_3.4.10

GLIBCXX_3.4.11

GLIBCXX_3.4.12

GLIBCXX_3.4.13

GLIBCXX_FORCE_NEW

GLIBCXX_DEBUG_MESSAGE_LENGTH

[root@Hongkong node-v4.5.0]#

这里并没有查看到: GLIBCXX_3.4.15

执行以下命令，查找编译 gcc 时生成的最新动态库：

find / -name "libstdc++.so.6"

[root@Hongkong node-v4.5.0]# find / -name "libstdc++.so.6"

/home/installSoft/gcc-4.8.2/build/stage1-x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6

/home/installSoft/gcc-4.8.2/build/x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6

/home/installSoft/gcc-4.8.2/build/prev-x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6

/usr/lib64/libstdc++.so.6

/usr/local/gcc/lib64/libstdc++.so.6

[root@Hongkong node-v4.5.0]#

取第一条：

/home/installSoft/gcc-4.8.2/build/stage1-i686-pc-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6 (32位|其他)

/home/installSoft/gcc-4.8.2/build/stage1-x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6 (64位|本例)

将上面的最新动态库 libstdc++.so.6 复制到 /usr/lib 目录下(32位)：

将上面的最新动态库 libstdc++.so.6 复制到 /usr/lib64 目录下(64位)：

在64位系统下复制文件重新覆盖，出现?请输入y

cp /home/installSoft/gcc-4.8.2/build/stage1-x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6 /usr/lib64

cp /ftp/gcc-5.3.0/gcc-build-5.3.0/stage1-x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6 /usr/lib64

复制后，修改系统默认动态库的指向，即：重建默认库的软连接。

cp /ftp/gcc-5.3.0/gcc-build-5.3.0/stage1-x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6.0.21 /usr/lib64

切换工作目录至/usr/lib64：

cd /usr/lib64

删除原来软连接:

rm -rf libstdc++.so.6

将默认库的软连接指向最新动态库：

ln -s libstdc++.so.6.0.21 libstdc++.so.6

完成后再次执行：

[root@Hongkong node-v4.5.0]# strings /usr/lib64/libstdc++.so.6 | grep GLIBCXX

GLIBCXX_3.4

GLIBCXX_3.4.1

GLIBCXX_3.4.2

GLIBCXX_3.4.3

GLIBCXX_3.4.4

GLIBCXX_3.4.5

GLIBCXX_3.4.6

GLIBCXX_3.4.7

GLIBCXX_3.4.8

GLIBCXX_3.4.9

GLIBCXX_3.4.10

GLIBCXX_3.4.11

GLIBCXX_3.4.12

GLIBCXX_3.4.13

GLIBCXX_3.4.14

GLIBCXX_3.4.15

GLIBCXX_3.4.16

GLIBCXX_3.4.17

GLIBCXX_3.4.18

GLIBCXX_3.4.19

GLIBCXX_FORCE_NEW

GLIBCXX_DEBUG_MESSAGE_LENGTH

[root@Hongkong node-v4.5.0]#

这里已经查看到: GLIBCXX_3.4.15

添加共享库路径，su到root编辑ld.so.conf文件，添加如下内容到文件中：

vi /etc/ld.so.conf

/usr/local/gcc/mpc-0.8.1/lib

/usr/local/gcc/gmp-4.3.2/lib

/usr/local/gcc/mpfr-2.4.2/lib

/usr/local/gmp-5.1.3/lib

/usr/local/mpfr-3.1.2/lib

/usr/local/mpc-1.0/lib

保存退出，执行ldconfig命令

执行以下看看装好没有：

/usr/local/gcc/bin/gcc -v

gcc version 4.8.2 (GCC)

卸载旧版本

yum remove -y gcc gcc-c++

updatedb

链接新版本

cd /usr/bin

ln -s /usr/local/gcc/bin/gcc gcc

ln -s /usr/local/gcc/bin/g++ g++

检查版本

gcc -v

Tags: gcc , node

NodeJs平台 | 评论(0) | 引用(0) | 阅读(1439)

ArtTemplate_List 实例

[

2016/08/02 16:56 | by 刘新修 ]

ArtTemplate_List 实例1

XML/HTML代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
{{/if}}
</script>
<script>
var data = {
title: '基本例子',
isAdmin: true,
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html

ArtTemplate_List 实例2

XML/HTML代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>compile-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<h1>在javascript中存放模板</h1>
<div id="content"></div>
<script>
var source = '<ul>'
+ '{{each list as value i}}'
+ '<li>索引 {{i + 1}} ：{{value}}</li>'
+ '{{/each}}'
+ '</ul>';
var render = template.compile(source);
var html = render({
list: ['摄影', '电影', '民谣', '旅行', '吉他']
});
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

XML/HTML代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<h1>在javascript中存放模板</h1>
<div id="content"></div>
<script>
/***** 小模版 *****/
var source=''
+'<ul>'
+ '{{each list as value i}}'
+ '<li>索引 {{i+1}} ：{{value}}</li>'
+ '{{/each}}'
+'</ul>';
/***** 定义变关联逻辑代码片段（小模版） *****/
var connectJs=template.compile(source);
/***** 最终的数据源等于==逻辑代码关联数据 *****/
var htmlData=connectJs({
list: ['摄影', '电影', '民谣', '旅行', '吉他']
});
/***** 把最终处理后的数据源插入到页面 *****/
document.getElementById('content').innerHTML=htmlData;
</script>
</body>
</html>

实例访问地址：http://code.liuxinxiu.com/jstpl/artTemplate/demo/best.html

include嵌入子模板:

XML/HTML代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>include-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
<h1>{{title}}</h1>
{{include 'list'}}
</script>
<script id="list" type="text/html">
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
</script>
<script>
var data = {
title: '嵌入子模板',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

理解部分（使用普通for循环加声明语法，进行数组遍历）1：

XML/HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AtrTemplate</title>
</head>
<body>
<div id="content"></div>
<script src="js/template-native.js"></script>
<script id="test" type="text/html">
<%for( i = 0; i < content.length; i++) {%>
<h1><%=content[i].title%></h1>
<p>条目内容 : <%=content[i].list%></p>
<%}%>
// 等同于普通的for循环，在普通的for循环上给每一行语法声明加上<% xx %>
// 等同于普通的for循环，在普通的for循环上取值部分加上类似jsp的变量声明 <%= xx %>
//for(i=0;i<content.length;i++){
// <h1><%=content[i].title%></h1>
// <p>条目内容 : <%=content[i].list%></p>
//}
</script>
<script>
/***** 自造数据，content为数组List便于测试循环 *****/
var data={
content:[
{
title: "artTemplate",
list: "新一代 javascript 模板引擎",
},
{
title: "特性",
list: "性能卓越，执行速度快"
}
]
};
/***** 用template映射数据到逻辑代码区域|也可以理解称给逻辑代码片段绑定数据源 *****/
var html=template('test',data);
/***** 选择页面Dom元素，插入处理后的数据 *****/
document.getElementById("content").innerHTML=html;
</script>
</body>
</html>

理解部分（使用普通for循环加声明语法，进行双层嵌套数组遍历）2：

XML/HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AtrTemplate -- 简介</title>
</head>
<body>
<div id="content"></div>
<script src="js/template-native.js"></script>
<script id="listtemp">
</script>
<script id="test" type="text/html">
//循环嵌套，循环数组里的数组
<%for(i=0;i<content.length;i++){%>
<h1><%=content[i].title%></h1>
<ul>
<%for(j=0;j<content[i].list.length;j++){%>
<li><%=content[i].list[j]%></li>
<%}%>
</ul>
<%}%>
</script>
<script>
var data={
content:[
{
title: "artTemplate",
list:["新一代 javascript 模板引擎"]
},
{
title: "特性",
list: [
"性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍",
"支持运行时调试，可精确定位异常模板所在语句",
" 对 NodeJS Express 友好支持",
"安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）",
" 支持include语句",
"可在浏览器端实现按路径加载模板",
"支持预编译，可将模板转换成为非常精简的 js 文件",
"模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选",
"支持所有流行的浏览器"
]
}
]
};
/***** 用template映射数据到逻辑代码区域|也可以理解称给逻辑代码片段绑定数据源 *****/
var html=template('test',data);
/***** 选择页面Dom元素，插入处理后的数据 *****/
document.getElementById("content").innerHTML=html;
</script>
</body>
</html>

Tags: template

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(1160)

JS 格式化日期

[

2016/07/15 21:03 | by 刘新修 ]

JavaScript代码

/***** 格式化日期 *****/
function formatDate(_strTime,_format){
var date=new Date(_strTime);
var paddNum=function(num){
num+="";
return num.replace(/^(\d)$/,"0$1");
}
//指定格式字符
var cfg={
yyyy:date.getFullYear() //年:4位
,yy :date.getFullYear().toString().substring(2) //年:2位
,M :date.getMonth() + 1 //月:如果1位的时候不补0
,MM :paddNum(date.getMonth()+1) //月:如果1位的时候补0
,d :date.getDate() //日:如果1位的时候不补0
,dd :paddNum(date.getDate()) //日:如果1位的时候补0
,hh :date.getHours() //时
,mm :date.getMinutes() //分
,ss :date.getSeconds() //秒
}
_format||(_format="yyyy-MM-dd hh:mm:ss");
return _format.replace(/([a-z])(\1)*/ig,function(m){return cfg[m];});
}
formatDate("Tue Jul 16 01:07:00 CST 2013","yyyy-MM-dd ");

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(1068)

前端开发工程化—— webpack 的搭建与配置

[

2016/06/12 17:48 | by 刘新修 ]

webpack 是一个npm包，所以我们通过 npm 命令来全局安装：

D:\wmnp3\nodeJs>npm install webpack -g

安装完成后，命令行下就有 webpack 命令可用，执行 webpack --help 可以查看 webpack 提供的各种命令。

当然如果常规项目还是把依赖写入 package.json 包去更人性化，初始化创建一个package.json文件：

cd D:\wmnp3\wwwroot\nodeJs\MVC\helloWorld

npm init

npm install webpack --save-dev 在当前目录下安装局域的webpack

安装 sass-loader 相关的加载器：

安装 CSS 相关的加载器：

安装配置图片加载器url-loader

它会将样式中引用到的图片转为模块来处理，使用该加载器需要先进行安装：

安装 babel-loader 相关的加载器：

使用Babel转译器，帮助我们将ES6代码转译为主流浏览器支持的ES5代码。

babel-loader加载器能将ES6的代码转换成ES5代码，这使我们现在可以使用ES6了；我们在使用之前，我们需要安装babel-loader

npm install babel-loader --save-dev --registry=https://registry.npm.taobao.org

npm install babel-preset-es2015 --save-dev

安装babel-preset-es2015

安装babel-runtime

ExpressJS启动服务：http://127.0.0.1:3000

webpack相关命令如下：

webpack 最基本的启动webpack命令

webpack -w 提供watch方法，实时进行打包更新

webpack -p 对打包后的文件进行压缩

webpack -d 提供SourceMaps，方便调试

webpack --colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤

webpack --profile 输出性能数据，可以看到每一步的耗时

webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块

webpack --help 帮助说明

webpack打包会根据依赖自动并合代码模块，使用webpack -p 压缩代码成一行.从而加快页面请求速度，使用前后对比：

压缩代码前：

压缩入口代码后：

最后附上webpack.config.js 的配置文件：

JavaScript代码

var path=require("path");
var webpack=require('webpack');
var ExtractTextPlugin=require("extract-text-webpack-plugin");
/**** webpack.config.js ****/
module.exports={
context:__dirname+'/assets', //requre('a.js')的时候从哪个路径查找
entry:{
main:__dirname+"/assets/js/public/main.js",
index:__dirname+"/assets/js/public/index.js"
},
/**** 新添加的module属性 ****/
output:{
path:__dirname+'/build/js/',
filename:'[name].bundle.js', //模版基于entry的key
publicPath:"/xfile/" //引用你的文件时考虑使用的地址(可设成http地址, 如:http://cdn.my.com)
},
/**** 新添加的module属性 ****/
module:{
loaders:[
{
test:/\.(jpg|png|svg)$/i,
loaders:[
'image?...',
'url?limit=10000&name=img/[name].[hash:8].[ext]',
]
},
{
test:/\.js$/,
exclude:/(node_modules|bower_components)/,
loader:'babel',
query:{
presets:['es2015'],
plugins:['transform-runtime']
}
},
{test: /\.css$/,loader: ExtractTextPlugin.extract("style-loader","css-loader")},
{test: /\.(jpg|png|svg)$/,loader:"url?limit=8192"},
{test: /\.scss$/, loader:"style!css!sass"}
]
},
plugins:[
//new webpack.optimize.CommonsChunkPlugin('common.js'),
new ExtractTextPlugin("[name].css"),
new webpack.ProvidePlugin({
"jQuery":path.resolve(
__dirname,
"js/lib/jquery/jquery-1.8.3.js"
),
"$":path.resolve(
__dirname,
"js/lib/jquery/jquery-1.8.3.js"
)
}),
]
}

Tags: node , webpack

NodeJs平台 | 评论(0) | 引用(0) | 阅读(1813)

requireJS在Node平台安装、创建build实例、JS模块化加载、打包

[

2016/05/28 22:41 | by 刘新修 ]

requireJS在Node平台安装、创建build实例、JS模块化加载、打包

requireJS在Node平台上安装（推荐使用NodeJs绿色版环境套件）：

C++代码

npm install -g requirejs
D:\wmnp3\wwwroot\nodeJs\MVC\helloWorld>npm install -g requirejs
npm http GET https://registry.npmjs.org/requirejs
npm http 200 https://registry.npmjs.org/requirejs
npm http GET https://registry.npmjs.org/requirejs/-/requirejs-2.2.0.tgz
npm http 200 https://registry.npmjs.org/requirejs/-/requirejs-2.2.0.tgz
D:\wmnp3\nodeJs\r.js -> D:\wmnp3\nodeJs\node_modules\requirejs\bin\r.js
D:\wmnp3\nodeJs\r_js -> D:\wmnp3\nodeJs\node_modules\requirejs\bin\r.js
requirejs@2.2.0 D:\wmnp3\nodeJs\node_modules\requirejs
D:\wmnp3\wwwroot\nodeJs\MVC\helloWorld>

创建build.js （对应wmnp环境套件：D:\wmnp3\nodeJs\build\test.build.js）

JavaScript代码

({
appDir:'../../wwwroot/nodeJs/MVC/helloWorld/public/js',
baseUrl:'test',
dir:'../../wwwroot/nodeJs/MVC/helloWorld/public/js/test-built',
paths:{
jquery:'empty:'
},
modules:[
{
name:'b'
},
{
name:'c'
},
]
})
/**********************************************
"appDir": "./", /**** 应用根路径 ****
"dir": "dist", /**** 打包的文件生成到哪个目录
"optimize": "none", /**** 是否压缩 ****
***********************************************/

实例1（对应wmnp环境套件：http://127.0.0.1:3000/test_page）::

JavaScript代码

/***************************************************************
require.config(); 等同于 requirejs.config();
***************************************************************/
requirejs.config({
baseUrl:'/js/test',
paths:{
jquery:'../lib/jquery.min',
hello:'hello',
afile:'a',
bfile:'b',
cfile:'c',
},
shim:{
only:{exports:'only'},
/***** shim中hello源对应paths模块hello.JS *****/
hello:{
/***** 用exports导入当函数，必须换成 init 函数导入多个函数的文件 *****/
init:function(){
return{
uinfos:"liuxinxiu",
hello1:hello1,
hello2:hello2
}
}
}
}
});
/******************************************************************************************************
require和define 都可以加载依赖元素(都是用于加载依赖）
1. require 要用于加载类相关JS文件，build后不参与代码合并，所用到的资源只进行压缩，http自动请求其他文件.
2. define 真正意义上的模块化处理，load本文件及外文件内的代码片段，build后参与代码合并，http自动请求其他文件.
******************************************************************************************************/
/***********************************************************
require(['afile','bfile','cfile'],function(a,b,c){
var x1=require("afile");
var x2=require("bfile");
var x3=require("cfile");
});
***************************************************************/
/**************************************************************
define(['bfile'],function(b){
console.log('run c.js :'+b.color+','+b.width);
});
***************************************************************/
requirejs(["http://code.liuxinxiu.com/php/Interface/getUserInfo.php?Jsoncallback=define"],
function(data){
//The data object will be the API response for the
//JSONP data call.
console.log(data);
}
);
require(['jquery'],function(){
/***** 调用后写入你的jq代码 *****/
$("body").attr("yy","111");
});
/******************************************************************************
require.config();
1. shim中exports定义好的函数可以用（requirejs+define）引入并使用
2. shim中init定义好的函数则必须以用（define）引入并使用
*************************************************************************/
requirejs(['only'],function(only){
only();
});
define(['hello'],function(data){
/***** 定义值直接取，函数直接调用 *****/
console.log(data.uinfos);
data.hello2();
});

实例2（对应wmnp环境套件：http://127.0.0.1:3000/test_load）:：

JavaScript代码

requirejs.config({
baseUrl:'/js/test',
paths:{
"afile":'a?y=1',
"bfile":'b',
"cfile":'c',
"core1":'cores/core1',
"core2":'cores/core2',
"util1":'utils/util1',
"util2":'utils/util2',
"service1":'services/service1',
"service2":'services/service2',
}
});
/***************************************
****************************************/
require(['c'],function(){
//a();
})

执行（压缩/打包）：D:\wmnp3\nodeJs>node node_modules\requirejs\bin\r.js -o build\test.build.js

Tags: requirejs

NodeJs平台 | 评论(0) | 引用(0) | 阅读(1294)

Express.js 构建工程实例 ---- [ 环境安装、控制器/路由设置、Post+Jsonp接口、ejs模版、全局变量 ]

[

2016/05/28 21:40 | by 刘新修 ]

Express.js 构建工程实例 ---- [ 环境安装、控制器/路由设置、Post+Jsonp接口、ejs模版、全局变量 ]

ExpressJS在Node环境上安装( 绿色版Node运行环境套件下载 )：

app.js 代码如下：

JavaScript代码

/******************************************************
*************** global modules ******************
******************************************************/
var express=require('express');
var path=require('path');
var favicon=require('serve-favicon');
var logger=require('morgan');
var cookieParser=require('cookie-parser');
var bodyParser=require('body-parser');
var routes=require('./routes/index');
//var redis=require('./routes/redis');
var app=express();
/******************************************************
*************** view engine setup ******************
******************************************************/
/****************** jade模版 *********************/
/*******************************************************
app.set('views',path.join(__dirname,'views/jade/'));
app.set('view engine','jade'); //jade or ejs
********************************************************/
/****************** ejs模版 *********************/
app.set('views',path.join(__dirname,'views/ejs/'));
app.set('view engine','ejs'); //jade or ejs
/****************** ejs模版 *********************/
/******************************************************
****************** routes setup ********************
******************************************************/
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname,'public')));
app.use('/',routes);
/****************** routes setup *********************/
/*******************************************************
app.use('/redis',redis);
app.use('/jsonp',routes);
app.use('/login',routes);
*************************************************/
/******************************************************
****************** 服务错误处理 ********************
******************************************************/
/***** catch 404 and forward to error handler *****/
app.use(function(req,res,next){
var err=new Error('404 Not Found');
err.status=404;
next(err);
});
// error handlers
// development error handler
/***** 通用错误处理程序 *****/
if(app.get('env')==='development'){
app.use(function(err,req,res,next){
res.status(err.status||500);
res.render('sys/error',{
message:err.message,
error:err,
version:process.version
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err,req,res,next){
res.status(err.status||500);
res.render('sys/error',{
message:err.message,
error:{}
});
});
/***** 通用错误处理程序 *****/
module.exports=app;

routes/index.js 代码如下：

JavaScript代码

/******************************************************
*************** router *************************
******************************************************/
var express=require('express');
var router=express.Router();
var url=require("url"); //解析GET请求
var query=require("querystring"); //解析POST请求
/************* GET home page demo *************/
router.get('/',function(req,res,next){
res.render('sys/index',{title:'Express'});
});
router.get('/jsonp',function(req,res,next){
res.render('main/jsonp',{
title:'jsonp'
});
});
router.get('/login',function(req,res,next){
res.render('main/login',{
title:'The Entrar-shadow Website',
fonts:'Member Login',
username:'Liuxinxiu',
});
});
router.get('/test_load',function(req,res,next){
var build=req.query.build;
res.render('test/test_load',{
title:'build',
build:build
});
});
router.get('/test_page',function(req,res,next){
var build=req.query.build;
res.render('test/test_page',{
title:'test_page',
build:build
});
});
/*
app.get('/jsonp',function(req,res,next){
res.jsonp({status:'jsonp'});
});
*/
/************* 自造Json数据 *************/
var userData='PHN0eWxlPip7bWFyZ2luOjA7cGFkZGluZzowO31oMXtmb250LXNpemU6MTZweDt0ZXh0LWFsaWduOmNlbnRlcjsgbGluZS1oZWlnaHQ6NDVweDt9Ym9keXtjb2xvcjojMzMzO2ZvbnQtc2l6ZToxNHB4O2ZvbnQtZmFtaWx5OiJNaWNyb3NvZnRZYWhlaSI7YmFja2dyb3VuZDojQjdDQUNDO31kaXZ7Ym9yZGVyOjFweCBzb2xpZCAjNDA1RTdCOyBib3JkZXItYm90dG9tOjA7IHdpZHRoOjk1JTsgbWFyZ2luOjAgYXV0bztiYWNrZ3JvdW5kOiNmZmY7Y29udGVudDoiIjtkaXNwbGF5OnRhYmxlO2NsZWFyOmJvdGh9bGl7bGluZS1oZWlnaHQ6MzVweDtsaXN0LXN0eWxlOm5vbmU7d2lkdGg6MjUlO3RleHQtYWxpZ246Y2VudGVyO2JvcmRlci1ib3R0b206MXB4IHNvbGlkICM0MDVFN0I7ZmxvYXQ6bGVmdDt9PC9zdHlsZT48aDE+5pyA6L+R6aOO5LqR5Lq65ZGY5ZCN5Y2VPC9oMT48ZGl2Pg0KCTx1bD4NCgkJPGxpPumjjua4heaJrDwvbGk+DQoJCTxsaT4xMTAxPC9saT4NCgkJPGxpPjIzPC9saT4NCgkJPGxpPjUyODE5OTExPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuiuuOW/l+mjnjwvbGk+DQoJCTxsaT4xMTAxPC9saT4NCgkJPGxpPjIzPC9saT4NCgkJPGxpPjUyODE5OTExPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuS7pOeLkOWGsjwvbGk+DQoJCTxsaT4xMTAyPC9saT4NCgkJPGxpPjIxPC9saT4NCgkJPGxpPjUyODE5OTAxPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuS7u+aIkeihjDwvbGk+DQoJCTxsaT4xMTAzPC9saT4NCgkJPGxpPjIyPC9saT4NCgkJPGxpPjUyODE5OTkxPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuS7u+ebiOebiDwvbGk+DQoJCTxsaT4xMTA0PC9saT4NCgkJPGxpPjI0PC9saT4NCgkJPGxpPjUyODE5OTgxPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuS4nOaWueS4jei0pTwvbGk+DQoJCTxsaT4xMTA1PC9saT4NCgkJPGxpPjI2PC9saT4NCgkJPGxpPjUyODE5OTgxPC9saT4NCgk8L3VsPg0KCTwvZGl2Pg==';
var dataJson={status:1,message:"这是一个JSONP接口,success!",dataList:userData,JsonArray:[0,1,2,3,4,5]};
/************* 处理GET请求(jsonp需判断参数单独处理) *************/
router.get('/API/sendGet/jsonpInfo.do',function(req,res){
//res.contentType('json');//返回的数据类型
//res.writeHead(200,{"Content-Type":"text/json"});
res.setHeader('Content-Type','text/json;charset=UTF-8');
var params=url.parse(req.url,true).query; //解释url参数部分name=zzl&email=zzl@sina.com
/**** 获取请求过来的跨域回调函数名称 ****/
var reqQuery=req.query,Jsoncallback=req.query.Jsoncallback;
/**** 如果有Jsoncallback的情况 ****/
if(reqQuery&&Jsoncallback){
//console.log(params.query.Jsoncallback);
//res.jsonp({status:200,message:"这是一个JSONP接口",data:[]});
//res.send(JSON.stringify({status:200,message:"success!这是一个JSONP接口",data:[]}));
/**** 拼成一个JS字符串 ****/
var str=Jsoncallback+'('+JSON.stringify(dataJson)+')';
//res.json(str);
//res.write(str);
res.end(str);
}
/**** 没有Jsoncallback的情况 ****/
else{
res.json({status:200,message:"这是一个JSON接口",data:[]});
}
});
/************* 处理POST请求(Body/x-www-form-urlencoded) **************/
router.post('/API/sendPost/loginSubmit.do',function(req,res){
var username=req.body.username;
var password=req.body.password;
//console.log(username!='');
if((username&&password!='')){
console.log("Username="+username+",password="+password);
/**********************************************************************************
/************** JSON.stringify(v) 和 res.json 都是格式数据 ********************/
/*********************************************************************************
res.json({status:1,info:"数据提交成功！",username:JSON.stringify(username)});
/*********************************************************************************/
res.json({status:1,info:"数据提交成功！",username:username});
}else{
res.end("0");
}
});
module.exports=router;

ejs 模版：

XML/HTML代码

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<link type='text/css' href="/css/login/home.css" rel='stylesheet' />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>test/build=</h1>
<%if(1+1===2){%>
<h1><%= build %></h1>
<%}%>
</body>
<%if(build==null){%>
<script src="http://localhost:3000/js/lib/require.js" data-main="http://127.0.0.1:3000/js/test/app_page.js"></script>
<%}%>
<%if(build!=null&&build==1){%>
<script src="http://localhost:3000/js/lib/require.js" data-main="http://127.0.0.1:3000/js/test-built/test/app_page.js"></script>
<%}%>
</html>