jquery-css-mahoro: 新嘗試的集合

這篇文章並不是特別用來介紹 jquery-css-mahoro,主要在這次的開源過程中,我嘗試加入了一些之前沒有使用過的工具/流程。

本文將會概述一下這次 jquery-css-mahoro 中的新嘗試有哪些,而日後可能會有一些文章稍微深入介紹本次的新嘗試(也可能沒有,我就是懶),請大家拭目以待。

jquery-css-mahoro

不過還是要先來簡介一下這次的開源小物。

jquery-css-mahoro https://github.com/pc035860/jquery-css-mahoro

是我覺得每次操作 CSS animation 的 class 都很麻煩,進而寫出的小小 jQuery plugin (真心覺得 ngAnimate 超方便)。

它能做的事情就 如 README 裡面所寫

  1. 加上 CSS animation class
  2. CSS animation 開始跑
  3. 移除 CSS animation class

本來我只是把它丟在 某個 gist 裡面,後來發覺這樣要使用還是不太方便,還是需要丟上 NPM;既然要丟上 NPM,不如就找時間來認真的開源一下。

關於命名

現在與 CSS animation 有關的 jQuery plugin 實在太多,大家的名字也都差不多沒什麼識別度,既然這樣我還不如選一個特立獨行一點的,好好地做 SEO 應該還還是會有可見度的啦(吧)。

至於為什麼叫 Mahoro,我想我高中的朋友們比較清楚 w

Write with ES2015

Mahoro 是用 ES2015 語法寫的。

其實整個 repo 裡唯一不是 ES2015 的 .js 檔只有 test/karma.conf.js

Rollup as bundler

rollup.js http://rollupjs.org/

Rollup 是未來版的 module bundler,跟 browserify 或 webpack 最大的差異是它預設只認 ES2015 的 module。它最強力的特色就是在全部使用 ES2015 module 來做 bundle 的前提下,有透過 “tree-shaking” 來讓 bundle 結果較為精簡的效果(webpack 2 也會支援此功能)。

其實這次的 jquery-css-mahoro 壓根小到不太需要 bundler,但我還是硬掛上去 XD

需要注意的是 它真的只做好它份內的工作,所以你需要加掛 plugin 來達到接近 webpack 的功能:

感想:Rollup 還沒有 incremental build,老實說每次都重新 build 有點慢,不過 tree-shaking 真的蠻酷的

/* file: rollup.config.js */

import babel from 'rollup-plugin-babel';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
  entry: 'lib/index.js',
  plugins: [
    babel(),
    nodeResolve({
      jsnext: true,
      main: true,
      browser: true
    }),
    commonjs()
  ],
  dest: 'dist/jquery.css-mahoro.js'
};

Build with NPM scripts

我平常的起手 task runner 都是 gulp,在經歷 一些文章洗腦 之後,這次嘗試純用 npm run xxx 來解決所有 task。

另外裝的輔助工具:

  • onchange — 支援 glob pattern 的監看並執行工具
  • argv-set-env — 跨平台設定 environment varaibles (我在家會使用 Windows 開發)

這次 package.json 裡面的 scripts

{
  "test": "karma start test/karma.conf.js",
  "autotest": "karma start test/karma.conf.js --auto-watch --no-single-run",
  "watch": "onchange src/{**/,}*.js -v -- npm run build",
  "lint": "eslint src/{**/,}*.js",
  "build": "rollup -c --set-env-NODE_ENV=production && uglifyjs dist/jquery.css-mahoro.js -o dist/jquery.css-mahoro.min.js -c -m",
  "prepublish": "npm run lint && npm run build && npm run test"
}

感想:要跑的 task 簡單的話,還不錯用。如果複雜到需要另外寫給 node 跑的 script 的話,我想我還是會用 gulp。

No Bower package

如果是平常的我發前端 package,Bower 應該才是我的第一優先,這次特別嘗試如果只發 NPM package 會如何。

有興趣可以看一下相關的「去 Bower 文章」

這只是一次小小嘗試,我對 Bower 還是抱著支持的態度。

有缺點,改進就好了,整包丟掉不能解決問題。另外換個角度看,在 HTTP/2 日漸普及的時候繼續推 bundler 好像不全然是正確的方向

歡迎到 Bountysource 上支持 Bower https://salt.bountysource.com/teams/bower

Write tests for jQuery plugin

其實我真的沒有寫 test 的習慣(掩面);除了少寫之外,以前也沒有寫過 jQuery plugin 的 test。

這次是吃了秤砣鐵了心才硬是寫了一發 test,老實說最麻煩的部分其實可能是 setup 適合你/這個 project 的 test 環境/流程。

有在關注我早期文章的人應該有印象,我之前其實寫過 AngularJS 相關的 test 文章,之前基本上是使用 Jasmine。這次的 test 組合也是新的 — mocha + Chai

Runner 的部分還是採用老朋友 Karma (之前的文章有介紹),不過這次發現這位老朋友也是變強了很多(?)。這次在 Karma 上加掛了兩個 preprocessor,來協助整個 test 的順暢度:

感想:最後加上 karma-mocha-reporter 之後看起來好精美啊… (另外也推薦 karma-nyan-reporter)

/* file: test/karma.conf.js */

module.exports = function (config) {
  config.set({
    frameworks: ['mocha', 'chai'],

    reporters: ['mocha'],
    mochaReporter: {
      output: 'autowatch'
    },

    basePath: '../',
    files: [
      'node_modules/jquery/dist/jquery.min.js',
      'dist/jquery.css-mahoro.min.js',
      'test/template.html',
      'test/test.js'
    ],

    preprocessors: {
      'test/*.html': ['html2js'],
      'test/*.js': ['babel']
    },
    babelPreprocessor: {
      options: {
        presets: ['es2015']
      }
    },

    browsers: ['PhantomJS'],
    autoWatch: false,
    singleRun: true,
    colors: true
  });
};

後記

這次真的是投入超大量時間在 查/組合 各種設定,為了好好讓 Mahoro 開源真的是煞費苦心,不過也從中學到了不少新東西。

如果覺得 Mahoro 不錯用的話,幫我到 Github 上給個 star 吧!

jquery-css-mahoro https://github.com/pc035860/jquery-css-mahoro