Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
|
|
More info: Writing
|
|
More info: Server
|
|
More info: Generating
|
|
More info: Deployment
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-devnpm install HtmlWebpackPlugin –save-dev
eslint-loader是做语法检查的，可以帮助检测我们的代码是否规范，但是使用之前要安装eslint 和 eslint-loader：
npm install eslint –save-devnpm 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文件夹中。
最近在用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
之后你就可以启动你的webapp啦。
最近有一个右击显示右击菜单的需求。
因为在浏览器右击默认会调用浏览器的右键菜单，所以在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();
});
});
}
}
});
<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 : https://stackoverflow.com/questions/15731634/how-do-i-handle-right-click-events-in-angular-js .
百度推出BAE应用引擎已经很长时间，之前了解过，但是一直没有使用。之前阿里推出ACE的时候折腾过一阵子，但是当时技术知识太少。后来ACE关闭，现在BAE是国内唯一支持NodeJS的应用引擎了。有兴趣的也可以去试一下。你可以用它创建网站或博客，并且价格更便宜，静态的服务器一天只需一毛钱。
昨天折腾安装完Wordpress后，又开始在BAE上折腾Ghost Blog系统。折腾了快一天，到今天，终于安装完成可以访问了，http://ghost.dhumedia.cn/ 。以下是我的安装实践经历，供大家参考。
先贴一张博客截图。
[caption id=”attachment_17” align=”alignleft” width=”1009”]
ghost blog截图[/caption]
准备条件：
在BAE基础版进入添加部署选项，如果不缺钱可以用BAE专业版。
添加BAE应用：
模板类型选所有模板；
剩下的磁盘带宽和执行单元选最小的就够了。
开始安装：
在本地建立项目仓库文件夹，用git拉取你的BAE应用代码；
需要注意的坑：
Wordpress以其安装简单，使用方便的特点在全球吸引了大量用户，现在在中国也热度不降。前几年我就一直想试一下Wordpress，苦于没有条件，技术又不够，一直没能安装成功。现在终于安装成功了，记录一些心得提供给别人参考。
准备工作：
要发布一个Wordpress站点，你需要拥有以下条件。
安装步骤：
如果安装过程中有什么问题，可以在下方留言，我将为你解答：）