npm + webpack 开发实践

npm 是时下最流行的js安装包管理工具,而webpack则是近两年崛起的模块加载和打包工具。

这两个工具一起使用能大大提高我们前端的生产效率,现在就来讲讲如何用这两个工具初始化项目,提高我们的开发效率。

注意:本文的前提是开发机器已经安装过nodejs和npm , 对npm 有一定了解。

1.初始化npm 的package.json文件:

先在项目目录下打开命令行,执行

npm init
根据提示完成项目的初始化,系统会自动生成一个 package.json 文件。

2.安装 webpack 和 webpack-dev-server:

执行

npm install webpack –save-dev

npm install webpack-dev-server –save-dev
安装完成后, 可以看到package.json文件中的 devDependencies中有webpack和webpack-dev-server以及他们对应的版本。

node_modules文件夹中也安装了对应的依赖包。

3.配置webpack:

在当前目录下,创建config文件夹,作为webpack配置文件存放目录。

创建webpack.config.js、webpack.dev.config.js、webpack.build.config.js三个文件,dev和build两个文件会引用config.js,分别对应开发和生产打包时对应的webpack配置。

webpack.config.js :

 

let path = require(‘path’);

let ExtractTextPlugin = require(‘extract-text-webpack-plugin’);

let HtmlWebpackPlugin = require(‘html-webpack-plugin’);

let config = {

entry : {

bootstrap : [path.join(__dirname, ‘../src/bootstrap.js’)]

},

output : {

filename : ‘[name].[chunkhash].js’,

path : path.join(__dirname, ‘../dist’),

publicPath : ‘’

},

module: {

rules : [

{

test : /.js$/,

enforce : ‘pre’,

exclude : /node_modules/,

loader : ‘eslint-loader’,

options : {

emitWarning : true

}

},

{

test : /.js$/,

exclude : /node_modules/,

use : ‘babel-loader’

},

{

test : /.css$/,

use : ExtractTextPlugin.extract({

fallback : ‘style-loader’,

use : ‘css-loader’

})

},

{

test : /.html$/,

use : ‘html-loader’

}

]

},

plugins : [

new HtmlWebpackPlugin({

template: path.join(__dirname, ‘../src/index.html’)

})

],

resolve : {

modules : [

path.join(__dirname, ‘../src’),

path.join(__dirname, ‘../node_modules’)

]

}

};

module.exports = config;
可以看到里面用了几个webpack的plugin,这些plugin在使用之前必须安装:
npm install ExtractTextPlugin –save-dev

npm install HtmlWebpackPlugin –save-dev
eslint-loader是做语法检查的,可以帮助检测我们的代码是否规范,但是使用之前要安装eslint 和 eslint-loader:
npm install eslint –save-dev

npm install eslint-loader –save-dev
使用eslint同时,必须添加eslint的配置文件 , .eslintrc.json :
{

“env”: {

“browser”: true,

“commonjs”: true,

“es6”: true,

“jasmine”: true,

“protractor”: true,

“phantomjs”: false

},

“extends”: “eslint:recommended”,

“parserOptions”: {

“sourceType”: “module”

},

“rules”: {

“curly”: “error”,

“indent”: [

“error”,

4,

{

“SwitchCase”: 1

}

],

“quotes”: [

“error”,

“single”

],

“semi”: [

“error”,

“always”

]

}

}
babel是用来打包js,并且可以将es6 转为之前兼容的js,但是使用之前也必须安装:
npm install babel-loader –save-dev
而且babel也必须要一个配置文件 .babelrc :

webpack.dev.config.js

let config = require(‘./webpack.config.js’);

const port = 12000;

config.devtool = ‘inline-source-map’;

config.devServer = {

historyApiFallback : true,

contentBase : ‘./src’,

host : ‘0.0.0.0’,

port,

inline : true

};

module.exports = config;
其中的port是配置本地开发的端口。我配的是12000,在启动服务之后,可以通过 localhost:12000 调试开发环境。

webpack.build.config.js

let webpack = require(‘webpack’);

let config = require(‘./webpack.config.js’);

config.devtool = false;

config.plugins.push(new webpack.LoaderOptionsPlugin({

minimize: true,

options: {

htmlLoader:{

minimize: true,

removeAttributeQuotes: false,

caseSensitive: true

}

}

}));

config.plugins.push(new webpack.optimize.UglifyJsPlugin({

beautify : false,

output : {

comments : false

},

compress : {

warnings : false

}

}));

module.exports = config;
4.添加业务模块和文件:

我们在webpack.config.js中配置的是读取src文件夹中的bootstrap.js作为应用入口,而index.html作为主页面。

现在可以创建src文件夹,然后创建bootstrap.js和index.html文件。

如若要引用其他的模块,可在npm install 该模块之后 在 bootstrap.js中 import。

最后执行

npm run dev
命令 即可启动开发环境,启动之后可在 localhost:12000中预览。

开发过程中,要根据相应的文件安装相应的loader,然后用loader打包相应文件。

如果最后开发完成,要打包,执行

npm run build
命令即可将应用打包到dist文件夹中。

MacOS中80端口被占用解决方法

最近在用mac做前端开发。

利用nodejs启用80端口作静态服务器时,启动报错如下:

#

events.js:160

throw er; // Unhandled ‘error’ event

^

Error: listen EADDRINUSE 0.0.0.0:80

at Object.exports._errnoException (util.js:1022:11)

at exports._exceptionWithHostPort (util.js:1045:20)

at Server._listen2 (net.js:1262:14)

at listen (net.js:1298:10)

at doListening (net.js:1397:7)

at _combinedTickCallback (internal/process/next_tick.js:77:11)

at process._tickCallback (internal/process/next_tick.js:98:9)

at Module.runMain (module.js:609:11)

at run (bootstrap_node.js:420:7)

at startup (bootstrap_node.js:139:9)

at bootstrap_node.js:535:3
这是因为80端口被占用,所以启动失败。

网上一查发现原来mac自动启动了一个Apache服务器做web共享,启用的80端口。故我的webapp没法用80端口启动。

于是先把Apache的web共享服务换到其他的端口,方法如下:

sudo vi /etc/apache2/httpd.conf
把其中的Listen 80 中的80端口换为其他端口,我换为9080, 之后重启apache,运行以下命令:
sudo /usr/sbin/apachectl restart
好了,到此,Apache服务器对80端口的占用已经解除。

现在直接启动webapp服务时,又报了另外的错误:

events.js:160

throw er; // Unhandled ‘error’ event

^

Error: listen EACCES 0.0.0.0:80

at Object.exports._errnoException (util.js:1022:11)

at exports._exceptionWithHostPort (util.js:1045:20)

at Server._listen2 (net.js:1249:19)

at listen (net.js:1298:10)

at doListening (net.js:1397:7)

at _combinedTickCallback (internal/process/next_tick.js:77:11)

at process._tickCallback (internal/process/next_tick.js:98:9)

at Module.runMain (module.js:609:11)

at run (bootstrap_node.js:420:7)

at startup (bootstrap_node.js:139:9)

at bootstrap_node.js:535:3
这是因为mac对普通用户1024以下的端口全部禁用,如果你切换到root用户,或者使用sudo 启动,就可以成功启动了。

若还是启动失败,报80端口被占用,可以查看端口被占用情况再操作。

mac查看端口使用情况 方法如下 :

lsof -i :80 | grep LISTEN
可以获得占用80端口的进程PID,利用kill命令终结进程。

我查看的是9020端口,显示的是PID为35730的进程占用了9020。可用kill 命令直接终结 : kill -9 9020

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-12-01-16-49-16

之后你就可以启动你的webapp啦。

AngularJS 右击事件 指令

最近有一个右击显示右击菜单的需求。

因为在浏览器右击默认会调用浏览器的右键菜单,所以在angular里没有像ng-click和ng-dblclick自带的ng-right-click的指令,只能靠我们自己实现。

我在stackoverflow上找了一下,果然有人提了这样的问题。我就参考了一下,实现方式如下:


angular.module(‘app’).directive(‘ngRightClick’,function(){
return {
restrict : ‘A’,
scope : {
callback : ‘&?ngRightClick’
},
link : function(scope, element, attrs){
element.bind(‘contextmenu’, event => {
scope.$apply(function () {
event.preventDefault();
//如果有回调函数
scope.callback();
});
});
}
}
});

html里指令使用方法如下:

<span ng-click=”click()” ng-right-click=”rightClick()”></span>
controller写法:


angular.module(‘app’,[]).controller(‘myController’,function($scope){
$scope.click = function(){
console.log(‘鼠标左击’);
};
$scope.rightClick = function(){
console.log(‘鼠标右击’);
};
});

参考自 stackoverflow : http://stackoverflow.com/questions/15731634/how-do-i-handle-right-click-events-in-angular-js .

BAE上Ghost博客安装实践

百度推出BAE应用引擎已经很长时间,之前了解过,但是一直没有使用。之前阿里推出ACE的时候折腾过一阵子,但是当时技术知识太少。后来ACE关闭,现在BAE是国内唯一支持NodeJS的应用引擎了。有兴趣的也可以去试一下。你可以用它创建网站或博客,并且价格更便宜,静态的服务器一天只需一毛钱。

昨天折腾安装完Wordpress后,又开始在BAE上折腾Ghost Blog系统。折腾了快一天,到今天,终于安装完成可以访问了,http://ghost.dhumedia.cn/ 。以下是我的安装实践经历,供大家参考。

先贴一张博客截图。

[caption id=”attachment_17” align=”alignleft” width=”1009”]ghost blog截图 ghost blog截图[/caption]

准备条件:

  1. 去百度开放云平台开通开发者账号;
  2. 进入开放平台管理控制台,然后进入BAE服务;
  3. 在BAE基础版进入添加部署选项,如果不缺钱可以用BAE专业版。
    添加BAE应用:

  4. 模板类型选所有模板;

  5. 模板场景选所有,然后下面选自定义。因为Ghost是nodejs的,提供的模板都是php的;
  6. 部署信息,域名和应用名称填写你喜欢的名字,之后就是你的百度应用的二级域名;
  7. 类型选nodejs-0.10-21-web或nodejs-4.2.6-web,千万不要选nodejs-4.4.4-web,ghost目前还不支持nodejs-4.2以上的版本;
  8. 代码版本工具选你习惯用的,你可以选择git;
  9. 执行套餐必须选256M以上,ghost需要内存至少256M;
  10. 剩下的磁盘带宽和执行单元选最小的就够了。
    开始安装:

  11. 在本地建立项目仓库文件夹,用git拉取你的BAE应用代码;

  12. 从ghost官网下载ghost安装源码,最好下完整版的带node_module的,因为npm镜像在中国,网络实在不太稳定;
  13. 将下载的代码解压到你的项目根目录,完整的解压完有160M左右;
  14. 修改package.json文件,将dependencies全部清空,因为依赖都已经在node_module里,不用在安装了。script里面只留下start:index.js, preinstall和test都去掉;
  15. 将config.example.js的端口2368或2369都改到18080,因为BAE只允许我们使用18080端口;
  16. 开启git bash命令行,运行git config –global http.postBuffer 157286400,因为我们要上传node_modules,文件太大。git默认限制上传大小;
  17. 现在可以commit你的项目然后push了;
    push完成之后就可以在BAE管理控制台发布你的应用了,初次发布时间很长,发布成功后,你就可以访问了。

需要注意的坑:

  1. nodejs的版本一定要在4.2及以下,要不然其他的可以,最后发现node版本不对就太坑了,我就这样被坑了一整天,然后重新添加应用换版本;
  2. 最好在本地把node_modules都推送上去,BAE的npm下载太慢了,很容易导致超时发布失败;
  3. 与第二点相关,node_modules推送上去的话,package.json里的dependencies最好都去掉,npm就不用再去拉取依赖的模块了,要不然也很影响发布时间;
  4. package.json里的script里只能留下”start”:”index.js”,因为BAE只识别start:XXX.js,然后截取start和js之间的名字作为启动应用的入口。后面的.js不能少;
  5. config.js里的端口不要忘了改;
  6. 要上传node_modules的话,postBuffer一定要配置在160M左右,要不然git没法push成功。
    我安装碰到的问题就这些,如果你也要试一下,希望能将我的经历提供给你借鉴,希望对你有所帮助,祝你安装成功。如果还有其他的问题,请在下面留言:)

Wordpress 安装实践

Wordpress以其安装简单,使用方便的特点在全球吸引了大量用户,现在在中国也热度不降。前几年我就一直想试一下Wordpress,苦于没有条件,技术又不够,一直没能安装成功。现在终于安装成功了,记录一些心得提供给别人参考。

 

准备工作:

要发布一个Wordpress站点,你需要拥有以下条件。

  1. 能存放你网站内容的支持php的虚拟主机或服务器。(我 使用的是阿里云的虚拟主机)
  2. 能绑定你站点域名,若没有域名,就只能通过IP访问了,不过一般购买虚拟主机的时候都会送一个二级域名。(我使用的是万网申请的域名,就是现在访问的这个)
  3. 能访问的mysql数据库,用于存放你的动态数据。
    做好了这些准备工作,可以开始安装Wordpress了。

安装步骤:

  1. 首先下载Wordpress的安装程序,将其解压后上传到你的云虚拟主机或云服务器的网站根目录。或者上传之后,在服务器上解压也行,也是解压到根目录。
  2. 解压完成后,访问你的站点。Wordpress会有安装引导。根据安装引导,配置你的mysql参数,包括数据库地址,库名,账号,密码等。配置完成后,Wordpress会创建Wordpress用到的数据表。默认wp_开头。
  3. 配置完成后,Wordpress会让你设置网站的管理员账号和密码。
  4. 设置完成后,你的Wordpress站点就大功告成啦,可以更改自己喜欢的主题。
    现在就可以在你自己的Wordpress站点中写博客,发文章啦。

如果安装过程中有什么问题,可以在下方留言,我将为你解答:)