分类
开发工具

使用 Webpack + Mocha 进行单元测试(二)

作为一名远程工作者,我并不能保证100%的电源供应,就目前的经验来看,我大约有30%的时间靠电池工作。所以我对能耗也比较敏感,把 eslint 和单元测试(mocha)放在 webpack 里做热加载,我觉得实在没什么必要,还是单独写单独跑吧。

查看 mocha-webpack 的 README,它对自己的介绍是:mocha-webpack 基本上等效于 $ webpack test.js output.js && mocha output.js 命令的封装,但是更高效、更强大。

让我们忽略后半句,先不去研究它高效和强大在什么地方,只看前半句。如果本质如此的话,那就不复杂,我只要写一个 webpack 配置文件生成所有的测试,然后跑这些测试就行了。最终方案:

  1. 一个入口文件,import 所有测试文件
  2. 用 webpack 打包入口文件,忽略掉不需要测试的内容(比如 CSS)
  3. 跑这个测试
  4. 平时写测试随便改下 import 路径就行了

测试文件多而杂,一个一个 import 太麻烦,可以写一个脚本帮我们:

const context = require.context('.', true, /.+\.test\.js?$/);
context.keys().forEach(context);
module.exports = context;

然后配合这样的配置文件即可:

const path = require('path');
const nodeExternals = require('webpack-node-externals');
const {resolve} = require('./webpack.base.config');

resolve.alias.test = path.resolve(__dirname, '../test');

const config = {
  target: 'node',
  entry: 'test/index.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'test.build.js',
  },
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
            },
          },
        ],
      },
      {
        test: /\.ya?ml$/,
        use: [
          'json-loader',
          'yaml-loader',
        ],
        exclude: /node_modules/
      },
      {
        test: /\.(css|styl)$/,
        loader: 'null-loader',
      },
      {
        test: /\.(png|jpg|gif|svg|woff2|eot|woff|ttf|ico)$/,
        loader: 'null-loader',
      },
      {
        test: /\.pug$/,
        loader: 'pug-plain-loader',
      },
    ],
  },
  mode: 'none',
  resolve,
};

module.exports = config;

执行的时候,直接用 shell 脚本来跑就行。

分类
开发工具

使用 Live-server 作为开发服务器

实战组件开发——手机日历 – 1. 项目启动 直播结束后,有同学问我怎么在本地调试。于是我突然意识到这个问题:

我一直都用 Webstorm,它有内置开发服务器,点一下就可以在浏览器里用 http:// 协议预览了。但是没有用 Webstorm 的同学就办不到,如果直接双击 .html 会议 file:/// 协议打开,影响开发。

然后我就录了下面这段视频,介绍使用 Live-server 进行本地开发。视频很短,中间等待安装的时间比较长,可以跳过。


另外,《实战组件开发》的第四讲:《用 Gulp 打包发布吧!》将于本周五进行,欢迎大家来围观。


Live-server 官网

分类
开发工具

神奇的 China

买的阿里云机器,git clone 不下来,报错:

A TLS packet with unexpected length was received

摸不到头脑,Google 之,在 StackOverFlow 上面找到一个神奇的答案

If you are in china,may be you should set proxy for git,for example

git config --global https.proxy 'socks5://127.0.0.1:9999'

竟然有效!

分类
开发工具

给WebStorm添加FileWatcher支持Browserify

按惯例先介绍本文角色:

Browserify 是一款让我们在浏览器端使用require('modules')来管理模块的工具。它会分析代码中的依赖关系,然后进行编译,打包成一个文件,我们只需要在HTML中引用生成的文件即可。

WebStorm 则是JetBrains出品的开发利器,集成了各种开发工具和环境,价格不贵,速度很快,样式好看,我非常喜欢。

Browserify 也提供了个工具,叫 watchify ,可以监控文件变化,即时编译。不过我更喜欢让WebStorm帮我处理这些事情,所以小小研究了一下,配置成功。

具体步骤

  1. 通过 NPM 安装 Browserify
    npm install browserify -g
    
  2. [Preferences] -> [Tools] -> [File Watchers]

  3. 点击“+”按钮,没有内建方案,所以选择“<custom>”

    WebStorm Preferences

  4. 名字(Name)随便写,描述(Description)可以留空,重点是下面几项

  5. FileType 选择 JavaScript

  6. Scope 监控范围,内建的都不合适,所以点“…”按钮,弹出自定义的监控范围

  7. 新建一个域,名字和项目一样,好认。展开项目目录,选择存放JS文件的目录,点右侧的“Include”和“Include Recursively”将该目录下所有文件和文件夹都包含进来。OK保存。

    WebStorm Scope

  8. Program 是要执行的程序,这里自然是 Browserify,Mac下通常在/usr/local/bin/browserify

  9. Arguments 参数,参考 Browserify 的文档介绍,常规命令是

    browserify index.js -o bundle.js --debug
    

    其中 index.js 是我的入口JS,那么直接去掉 browserify 就好了。

  10. Working Directory 工作目录,点击右侧的“Insert Macros”按钮,选择 “$ProjectFileDir$”。后面接上目录“/js/”。

  11. 完成!

    WebStorm Browserify File Watcher

小优化

  1. 前面我们设置监控范围的时候比较粗放,这样生成 bundle.js 之后会再跑一遍,有点不爽,所以图中我把 bundle.js 过滤掉了

  2. 确保这个File Watcher正常工作后,可以去把 Show console 设置成Never,这样在编辑到一半的时候就不会有错误提示了。

分类
开发工具

推荐好用的JS CDN

上周GFW又抽风,导致取自CDN的jQuery和Bootstrap经常404,后台各种罢工。

开始想说干脆放弃CDN得了,结果自家服务器也不是很给力……本地路径的静态文件也经常加载失败,挠了半天头,再去找找国内的CDN吧。

后来想起来前几天看到七牛搞了个免费的开源仓库CDN,通过Google找到,叫http://www.staticfile.org/。打开一看,首页只列出不多的几个库,版本也不是最新的。我以为又是个没人维护的烂尾工程,读了介绍才知道他们倡导大家都来提交库信息,共同建立全面的CDN资源。我本想把这次要到的库和可以更新的库提交上去,后来发现原来他们已经引入了cdnjs.com里所有的库,只不过没有写在首页……果然大家都喜欢写代码不喜欢写文档啊,差点就错过了。

BTW,cdnjs.com居然还提供了animate.css,真好。

好在他们做了命令行工具,可以装上查引用地址。比如我想知道能不能用underscore,就可以这样:

// 安装
npm install -g sfile

// 查找underscore
sfile search underscore

// 得到链接,这里要用全名
sfile get underscore.js

最后看https://github.com/staticfile/static/issues里的内容才知道,他们会把国外成熟的库直接从cdnjs复制过来,提交新库应以国内的为主。嗯,将来把Nervenet弄完也提交进去。

重复一下网站地址:http://www.staticfile.org/。最后感谢下这些好人,以及服务提供商七牛云存储

分类
开发工具

本地部署weinre帮助移动开发

weinre是个开源项目,用来在Web开发中做远程调试的工作,相当给力。后来也捐给了Apache基金会,并且从ruby移植到了JavaScript,现在可以直接通过npm安装。在最近的广告墙大重构中,这个工具帮了我很大的忙。

安装weinre首先要装node.js,后者在Windows和Mac上直接下包就能装,并且自动配置环境,很方便;在Linux上需要自己编译一次,也不复杂,我之前有篇日志写了,现在还好使,可以看看。

node.js环境搞定后,直接用npm就可以安装weinre了,直接装在全局中最好:

sudo npm install weinre -g

接下来启动weinre,我在这里卡了一阵,大概因为不太了解端口侦听的缘故,我以为直接启动就好,结果从外面连不上(手机连不上连点反应都没有,很难排查),因为侦听的是localhost的ip,也就是127.0.0.1。后来尝试绑定内网ip,才算解决问题:

# 8081是想找一个不常用的端口,后面的ip是我在内网的ip
weinre --httpPort 8081 --boundHost 192.168.10.54

这次无论是本机还是手机都可以正常访问了。然后Mac这里可能还会遇到点小问题。虽然我关闭了防火墙,但是Unix自带的ipfw还在工作,会阻止从外面过来的访问(不知道为啥80没问题),所以要给8081端口专门的许可:

sudo ipfw add 8081 allow from any to any

之后就万事大吉了,在HTML里添加 <script src="http://192.168.10.54:8081/target/target-script-min.js#meathill"></script> (域名根据具体情况修改),然后打开 http://192.168.10.54:8081/client/#meathill 就可以查看了,如果有多台终端在调试的话,还可以点选目标机器。

好了,享受下weinre带来的方便快捷的移动端调试吧。(不自己截图了,借用了weinre官网上的图片)

weinre使用截图
weinre使用截图

分类
开发工具

Flash Builder笔记

  1. 使用代码模版:
    1. 输入模版名称,比如pro(property)
    2. 按alt+/唤出代码提示(如果自己出来了就不需要了)
    3. 再按一次alt+/,就只有代码模版了
分类
开发工具

Aptana里安装Ant

开始整理以前的项目,准备换一种组织形式。所以产生一个需求,批量发布很多东西,比如发布一套html、发布若干JS、发布SWF,等等。

解决这种需求当然应该用ant,不过打开aptana查了下,发现里面没有ant。所以需要重新安装一下。因为ant是eclipse标配,所以安装过成还算简单。

分类
开发工具

使用Aptana进行基于jQuery框架的开发

慢慢的,Aptanta Studio已经升级到3.0.6,新版本具体更新哪些内容我也没在意——我只是追新而已——不过我终于发现了增加类库支持的方法。

Aptana Studio 2.0的时候,要使用什么类库就直接添加引用(Reference)就好了,非常方便;和其它开发工具同类型的操作方式也很相似,用起来很舒服。可是3.0升级后取消了这一功能,搞得大家很不适应,开发者承诺会让这个功能回归,结果确是另一副样子:添加对应sdocml文件到项目当中,而且得是物理添加,但是在我的环境中怎么搞都不成功。

从3.0.4起Aptana增加Start Page,介绍一些Features和Bug修复信息。我就是从里面的“Adding JavaScript libraries to your projects”了解到上面功能的。这次升级后我随手点开,发现“JavaScript Library Support”指向的是另外一个地址,里面提到,从3.0.5之后,可以直接通过添加包的方式来增加jQuery类库支持,方法如下:

  1. Commands > Install Bundle > jQuery
  2. 右击项目,选择Properties > Project Build Path,然后勾上jQuery 1.6.2的复选框
这样操作起来简单得多了。
PS:3.0.6之后,不再需要步骤2
PS2:在“Install Bundle”时我还发现其它一些包,比如WordPress和Github,有机会试用一下。
分类
开发工具 技术

Git笔记

这里记录一些git概念和技巧。