使用webpack时间越久，越觉得js越好玩，之前也写过一篇文章，但是太简陋啦。最近在配置使用webpack hot server,整了很长时间，终于还是被我整的差不多了，而且还是正常使用啦。我的项目不是那种静态的，我使用node做server去运行项目，然后调试js的。主要的有一下几点我把主要的几个文件列出来一下：app.js webpack.dev.server.js webpack.config.js以上几个是主要文件在app.js里面我们要加入的配置如下if(process.env.NODE_ENV == 'dev') { require('./webpack.dev.server')(app) } webpack.dev.server.js的配置如下： var webpack = require('webpack'); var WebpackDevServer = require('webpack-dev-server'); var config = require('./webpack.config'); var proxy = require('proxy-middleware'); var url = require('url'); module.exports = function(app) { // 使用3000端口 app.use('/js/out ...继续阅读 (472)

这个操作很简单的，只需要一个插件就好了，就是extract-text-webpack-plugin1，安装extract-text-webpack-plugincnpm install extract-text-webpack-plugin --save-dev2,配置文件添加对应配置首先require一下var ExtractTextPlugin = require("extract-text-webpack-plugin");plugins里面添加new ExtractTextPlugin("styles.css"),我这里如下：plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new ExtractTextPlugin("styles.css"), ],modules里面对css的处理修改为{test:/\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},千万不要重复了，不然会不起作用的我这里如下：module: { loaders: [ {test:/\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-lo ...继续阅读 (1307)

打包jsx文件，为了使得此文件可以直接被打包，并且在应用的时候不加入后缀，需要做以下几个步骤：1，安装jsx-loader$ npm install --save-dev jsx-loader2，配置module: { loaders: [ { //tell webpack to use jsx-loader for all *.jsx files test: /\.jsx$/, loader: 'jsx-loader?insertPragma=React.DOM&harmony' } ] },3，扩展设置resolve: { extensions: ['', '.js', '.jsx'] } ...继续阅读 (88)

1，安装需要的包npm install --save-dev webpack webpack-dev-server2，配置添加output: { filename: 'bundle.js', //this is the default name, so you can skip it //at this directory our bundle file will be available //make sure port 8090 is used when launching webpack-dev-server publicPath: 'http://localhost:8090/assets' //重点在这里 },3，安装 http-servernpm install --save-dev http-server4，页面添加启动脚本 Basic Property Grid ...继续阅读 (94)

//模块导入 Highchartsglobal.HighchartsAdapter = require('exports?HighchartsAdapter!../../bower_components/highcharts/adapters/standalone-framework.src'); module.exports = require('exports?Highcharts!../../bower_components/highcharts/highcharts.src');在entry.js文件中加入这行代码../../bower_components/highcharts/adapters/standalone-framework.src ../../bower_components/highcharts/highcharts.src这两行在上面的位置代表文件的位置 ...继续阅读 (745)

The final thing is to add three scripts entries into our package.json:{ "scripts": { "start": "npm run serve | npm run dev", "serve": "./node_modules/.bin/http-server -p 8080", "dev": "webpack-dev-server --progress --colors --port 8090" }, "name": "basic-property-grid", "version": "0.1.0", "main": "index.js", "dependencies": { "react": "~0.11.2" }, "devDependencies": { "webpack": "~1.4.4", "webpack-dev-server": "~1.6.5", "jsx-loader": "~0.11.2", "http-server": "~0.7.1" } }What we just did was to add 3 commands that can be run through npm run .s ...继续阅读 (96)

1，开始使用webpack首先新建一个app的项目,在项目下面执行如下代码：$ npm init // 用于初始化项目的package.json//初始化文件目录：app --- css --- main.scss --- js --- index.js --- a.js --- b.js --- c.js --- es6_module.js --- index.html --- package.json --- webpack.config.js2，安装webpack我们通过npm来将webpack安装到全局$ npm install webpack -g3，webpack配置webpack是需要进行配置的，我们在使用webpack的时候，会默认webpack.config.js为我们的配置文件。所以接下来，我们新建这个js文件。// webpack.config.js var path = require("path"); module.exports = { entry: './js/index.js', //演示单入口文件 output: { path: path.join(__dirname, 'js/ou ...继续阅读 (200)

关于磁盘空间会有一个问题就是磁盘空间满了，但是删除对应的文件后【你删除的没有错误】 ，通过du -h --max-depth=1查看后16K ./lost+found 26M ./test.zhidetou.net 88K ./spider 62M ./mocker.qeeniao.com 4.6M ./www.zhidetou.net 12G ./elasticsearch 12G .这里显示是12G啦，总磁盘大小是20G，也应该是60%发现文件是减少了，但是df -h 发现还是没有减少。Filesystem Size Used Avail Use% Mounted on /dev/xvda1 20G 11G 8.1G 57% / tmpfs 1.9G 0 1.9G 0% /dev/shm /dev/xvdb1 20G 15G 3.7G 81% /data仍然是81%原因就是因为某个程序还在占用此文件，文件句柄没有释放，所以即使你rm -rf磁盘空间也不会被释放。解决办法就是找到使用这个文件的进程，然后重启或者是直接kill掉后，再重启对应进程。 ...继续阅读 (112)

又拍云：http://jscdn.upai.com/ （支持https） 又拍云 CDNJSCN：http://www.cdnjs.cn/ （支持https）维护者(Sofish/hfcorriez/ikbear@qiniu)中科大库：https://servers.ustclug.org/2014/07/ustc-blog-force-google-fonts-proxy/ [支持https，完全GoogleAPIs镜像] 维护者（LUG@ustc） ...继续阅读 (81)

var date = '2015-09-10'; debug('date :',date); var starttime = moment(Date.parse(date)).second(0).minute(0).hour(0).format('X'); var endtime = moment(Date.parse(date)).add(1,'day').second(0).minute(0).hour(0).format('X'); debug('starttime :',starttime); debug('endtime :',endtime); debug('starttime :',moment.unix(starttime).format('YYYY-MM-DD HH:mm:ss')); debug('endtime :',moment.unix(endtime).format('YYYY-MM-DD HH:mm:ss'));如果是日期字符串，请先用Date.parse(date)进行parse下。如果是时间戳，请直接使用moment.unix()进行操作 ...继续阅读 (114)

1、查看innodb死锁情况查看事务情况show engine innodb status\G查看事务详情SELECT * FROM information_schema.INNODB_TRX\G2、kibana 4 添加图表，以及如何在dashboard【仪表板】上展示所有的图表或者分开展示图表添加图表的流程一定要清楚，先要有visualization【可视化视图】，然后才能在dashboard【仪表板】上面添加图表，事实上图表就是所谓的visualization【可视化视图】；这里的操作关键比较难的是如何添加visualization【可视化视图】，并且在添加visualization【可视化视图】过程中的Filter的操作。Filter说起来也很简单就是搜索出你要展示的数据数量的值，比如访问链接地址的时长，某个链接的请求次数的值。关键是在添加visualization【可视化视图】过程中，先要选择视图的类型，然后就要对metrics和buckets的操作。这里有一篇关于kibana4的图表入门：请点击这里3、curl 指定用户以及密码访问很简单：curl -u user:password -XGET http://www.xxx.net/study/就可以了.4、通过python的线程实现异步发送邮件from threading import Thread def sen ...继续阅读 (162)

ssh是一种网络协议，用于计算机之间的加密登录。ssh原理及应用可参考：SSH原理与运用（一）：远程登录生成ssh key步骤这里以配置github的ssh key为例：1. 生成ssh keyssh-keygen -t rsa -C "邮箱"然后根据提示连续回车即可在~/.ssh目录下得到id_rsa和id_rsa.pub两个文件，id_rsa.pub文件里存放的就是我们要使用的key。2. 上传key到githubclip ...继续阅读 (95)

配置多个ssh key的遇到的问题1，Bad owner or permissions on .ssh/config2，进行测试的时候总会出现提示输入密码以上两个问题多数是由于权限的问题解决问题一：将config的执行权限修改为600sudo chmod 600 ~/.ssh/config解决问题二:这个问题在我这里出现的原因是由于我将config拥有权限改成了root，导致出现的问题如果你也遇到这样的问题的话，可以试着改成拥有权限为自己就可以了。sudo chown xxx ~/.ssh/config[xxx]为linux的当前用户执行完之后在测试下，是不是已经就成功了，没有的话可以加群沟通 ...继续阅读 (88)

很奇怪的，这个是要去自己发现的，我也是在摸索中发现的，其实React的使用，只有你发现了，才觉得好玩，最近的Reflux就是这样子的。##表单提交部分handleSubmit:function(e){ e.preventDefault(); var params = {}; var keys = React.findDOMNode(this.refs.keys).value.trim(); var days = React.findDOMNode(this.refs.days).value.trim(); var num = React.findDOMNode(this.refs.num).value.trim(); var startDate = React.findDOMNode(this.refs.from_date).value.trim(); var endDate = React.findDOMNode(this.refs.to_date).value.trim(); //这部分是我自己发现的，哈哈 var regStyle = $('.regStyle')[0].value; var userTerminal = $('.userTerminal')[0].value; params['keys'] = keys; ...继续阅读 (859)

所谓gulp对less的一条龙服务是指，由less编译为css，再由css编译为min.css，再由min.css编译为min.css.map大白话就是Less文件转为css文件，然后将css文件压缩，再然后生成css压缩文件的map文件最后就得到了我们的需要使用的min文件和一些奇葩浏览器要用到的map文件gulp的配置如下var gulp = require('gulp'); var gulpLess = require('gulp-less'); var gulpConcat = require('gulp-concat'); var gulpSourcemaps = require('gulp-sourcemaps'); var gulpMinifyCss = require('gulp-minify-css'); var gulpRename = require('gulp-rename'); gulp.task('less',function(){ return gulp.src(paths.less) .pipe(gulpLess()) .pipe(gulp.dest('./app/css'))//这个是要存放css的目录 .pipe(gulpConcat('./app.css'))//这个是生成的css文件名 .pipe(gulp ...继续阅读 (104)

在使用gulp-less的时候会出现这样的一个问题####这个修改之前的代码//变量声明 var paths = { 'less':[ './app/less/**/*.less', ] }; gulp.task('less',function(){ return gulp.src(paths.less) .pipe(gulpLess()) .pipe(gulp.dest('./app/css')) });其实我的意思就是，将我less目录下面的所有文件合并成一个app.css但是这样执行确实行不通，会爆出来很多的错误。之前还是一头雾水，后来换了方式####这个修改之后的代码//变量声明 var paths = { 'less':[ './app/less/app.less', './app/less/main.less', ] }; gulp.task('less',function(){ return gulp.src(paths.less) .pipe(gulpLess()) .pipe(gulp.dest('./app/css')) });其实这样执行就没有问题了，其实很明了，问题已经出现了，也知道了原因，因为我们要生成一个文件app.css，那么其实app.less是主要 ...继续阅读 (63)

问题出现的情况是，我喜欢使用sublime text 写博客，写完后在粘贴进去。也是我就新建一个，但是没有保存，因为我觉的，反正写完就删除了，结果呢，写汉字的时候就会非常的慢。这个问题一直都有，还特意去google上搜索了一下，也未果。今天突然来了灵感，我发现原因是我没有保存，于是我试了一下，结果果然，保存一个临时一个地方再进行操作就块了很多。分析原因:应该是内存的问题，我没有保存文件的话，数据应该临时存到内存或者其他地方了，反正应该不是硬盘，内存不够的话，就会出现很慢计算，我觉的是这个原因，其实这个问题也是有的，我觉得处理逻辑是应该将为保存的文件临时存到/tmp这样的类似目录，如果正式存储的话在进行切换，删除tmp目录的文件，其实就是copy一份啦。要不然就给个提示嘛，说不行了，内容太多了，哈哈 ...继续阅读 (73)

Sublime Text 3常用快捷键快捷键组合 功能shift + cmd + p 打开命令面板control + ` 控制台cmd + n 新建标签cmd + 数字 标签切换cmd + option + 2 分成两屏control + 数字 分屏时移动到不同的屏幕cmd + delete 删除光标前所有字符, 貌似是Mac快捷键cmd + f 查找option + cmd + f 查找替换cmd + t 文件跳转control + g 行跳转, 类似vim中的num + ggcmd + r 函数跳转cmd + / 给选中行添加或去掉注释cmd + [或 cmd + ] 智能行缩进cmd + k + b 开关侧边栏 ...继续阅读 (112)

简介brew cask是一个用命令行管理Mac下应用的工具，它是基于homebrew的一个增强工具。homebrew可以管理Mac下的命令行工具，例如imagemagick, nodejs，如下所示：brew install imagemagick brew install node而使用上brew cask之后，你还可以用它来管理Mac下的Gui程序，例如qq, chrome, evernote等，如下所示：brew cask install qq brew cask install google-chrome brew cask install evernote安装安装homebrew用以下一行命令即可安装homebrewruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"之后执行 brew doctor 命令可以看看homebrew的环境是否正常。通常第一次安装完brew之后，还需要安装苹果的Command Line Tools。安装cask用如下命令来安装cask:brew tap phinze/cask brew install brew-caskLaunchRocketLaunchRocket是一个管理brew安装的service的工具，安装之后可以看所有的service的 ...继续阅读 (81)

Reflux是根据React的flux创建的单向数据流类库。Reflux的单向数据流模式主要由actions和stores组成。例如，当组件list新增item时，会调用actions的某个方法（如addItem(data)）,并将新的数据当参数传递进去，通过事件机制，数据会传递到stroes中，stores可以向服务器发起请求，并更新数据数据库。数据更新成功后，还是通过事件机制传递的组件list当中，并更新ui。整个过程的对接是通过事件驱动的。这里记录一个比较实用的实例；具体的想看详情的可以去‘http://segmentfault.com/a/1190000002793786#articleHeader24’这里仔细研读。var TodoActions = Reflux.createActions([ 'getAll', 'addItem', 'deleteItem', 'updateItem' ]); var TodoStore = Reflux.createStore({ items: [1, 2, 3], listenables: [TodoActions], onGetAll: function () { $.get('/all', function (data) { thi ...继续阅读 (95)

罗列一下提高效率的Nodejs模块，分享之。CheerioFast, flexible, and lean implementation of core jQuery designed specifically for the server.Cheerio，说它是服务器端的jQuery一点也不为过，在github上也是大受欢迎，star数达4500有余，至目前为止，已经有923次commit。它兼容jQuery绝大部分的库，以至于你只需要一句$ = require('cheerio').load(YOUR_HTML_CONTENT);，便可以像在前端用jQuery一样的舒畅，愉快。By the way，和Cheerio类似的框架还有：jsdom，一个受欢迎程度略低于Cheerio，但是它有2,147多的commit，可见维护者之诚意。WaterlineAn adapter-based ORM for Node.js with support for mysql, mongo, postgres, redis, and moreWaterline是从Sails框架衍生出来的Nodejs平台下的ORM，除了支持常见的mysql、mongodb，还支持PostgreSQL、Redis、Memory、Disk等等BookshelfA Node.js ORM for PostgreSQL, ...继续阅读 (92)

a fast, privately secured tunnel to transfer web pages and dns queriesHave you ever wanted to visit sites during the day from a location that denied access to those sites? Perhaps the company has denied access due to bandwidth considerations or you might have decided that the site you want to go to might not always be work safe depending on the story or pictures? What you need is the ability to create a secure and encrypted ssh connection to tunnel your browser traffic through.Using a ssh tunnel to retrieve the data from websites is significantly faster than trying to use X forwarding to open ...继续阅读 (77)

配置文件的格式变了是这样子的啦：systemLog: destination: file path: "/var/log/mongodb/mongodb.log" logAppend: true storage: journal: enabled: trueprocessManagement: fork: true net: bindIp: 127.0.0.1 port: 27017 setParameter: enableLocalhostAuthBypass: false ...如果想要添加其他参数，请到这里查看吧：http://docs.mongodb.org/manual/reference/configuration-options/ ...继续阅读 (67)

只需要执行如下的代码就好了$ gem sources --remove https://rubygems.org/ $ gem sources -a http://ruby.taobao.org/淘宝大哥的，哈哈 ...继续阅读 (65)

pipy国内镜像目前有：http://pypi.douban.com/ 豆瓣http://pypi.hustunique.com/ 华中理工大学http://pypi.sdutlinux.org/ 山东理工大学http://pypi.mirrors.ustc.edu.cn/ 中国科学技术大学对于pip这种在线安装的方式来说，很方便，但网络不稳定的话很要命。使用国内镜像相对好一些，如果想手动指定源，可以在pip后面跟-i 来指定源，比如用豆瓣的源来安装web.py框架：pip install web.py -i http://pypi.douban.com/simple注意后面要有/simple目录！！！如果提示：The repository located at pypi.douban.com is not a trusted or secure host and is being ignored. If this repository is available via HTTPS it is recommended to use HTTPS instead, otherwise you may silence this warning and allow it anyways with '--trusted-host pypi.douban.com'.请试试这个的办法pi ...继续阅读 (999)

python开发解决依赖库的办法你可以用pip导出你的dependency:$ pip freeze > requirements.txt然后在通过以下命令安装dependency:$ pip install -r requirements.txt如此依赖如果你在服务器部署的话，就可以直接安装需要的依赖库，就不用等着报错才去一个一个安装了。 ...继续阅读 (99)

nvm的安装请转到这里：https://github.com/creationix/nvm下面先说nvm的加速nvm 默认是从 http://nodejs.org/dist/ 下载的, 国外服务器, 必然很慢,好在 nvm 以及支持从镜像服务器下载包, 于是我们可以方便地从七牛的 node dist 镜像下载:$ NVM_NODEJS_ORG_MIRROR=http://dist.u.qiniudn.com nvm install 0.12.7于是你就会看到一段非常快速进度条:######################################################################## 100.0% Now using node v0.12.7如果你不想每次都输入环境变量 NVM_NODEJS_ORG_MIRROR, 那么我建议你加入到 .bashrc 文件中:# nvm export NVM_NODEJS_ORG_MIRROR=http://dist.u.qiniudn.com source ~/git/nvm/nvm.sh然后你可以继续非常方便地安装各个版本的 node 了, 你可以查看一下你当前已经安装的版本:nvm ls查看远端的nvm ls-remote下面再说下npm加速同理 nvm , npm 默认是从国外的源获取和下载包信息, 不慢 ...继续阅读 (932)

github 慢, 或者说是它的资源 host 被堵而已, 大家可以通过简单的 hosts 映射解决: 185.31.16.184 github.global.ssl.fastly.net原因是这样的吧： http://weibo.com/1415338244/ACTYkq8xK ...继续阅读 (96)

最近在使用Nodejs的一个库Iconv-lite，有时候会报出这样一个提示 Iconv-lite warning: decode()-ing strings is deprecated. Refer to https://github.com/ashtuchkin/iconv-lite/wiki/Use-Buffers-when-decoding 已经给出了对应的Refer。 具体详情见：https://github.com/ashtuchkin/iconv-lite/wiki/Use-Buffers-when-decoding 其实看完之后，很简单就是 如果有一个Buffer数据的话，你进行了toString()后，就已经进行了一层默认的decode操作，一般默认的是utf-8， 所以如果你在进行iconv.decode()的时候，就会出现一个提示，这个在最新版本会出现这个问题，其他的版本我就不知道了， 如果你在使用的过程中，decode之后，没有效果的话，可以试试，在decode之前先不要任何操作，直接将Buffer数据进行 decode，进过测试，直接decode(Bufffer)数据会效果比较好，谁用谁知道。 ...继续阅读 (796)

=>]Open DNS 208.67.222.222 208.67.220.220 =>]V2EX DNS 199.91.73.222 178.79.131.110 =>]OneDNS 112.124.47.27 =>]Comodo Secure DNS 8.26.56.26 8.20.247.20 =>]Google Public DNS The Google Public DNS IPv4 addresses 8.8.8.8 8.8.4.4 The Google Public DNS IPv6 addresses 2001:4860:4860::8888 2001:4860:4860::8844 =>]114 DNS 无劫持 114.114.114.114 114.114.115.115 拦截有害网站 114.114.114.119 114.114.115.119 拦截色情网站 114.114.114.110 114.114.115.110 =>]Norton ConnectSafe A - Security (malware, phishing sites and scam sites) Preferred DNS: 199.85.126.10 Alternate DNS: 199.85.127.10 B - Security + Pornography Preferred ...继续阅读 (101)